CSS响应式布局加流式布局

CSS响应式布局

div{
        border:1px solid rebeccapurple;   
    }
    .header{
        width: 80%;
        height: 100px;
        margin: 0 auto;
        background-color:  #4CAF50;
    }
    .content{
        display: flex;
        width: 80%;
        margin: 0 auto;
    }
    .content-left{
        flex: 0 0 300px;
        width: 300px;
        height: 100px;
        background-color: #008CBA; 
    }
    .content-middle{
        flex: 1;
        height: 100px;
        background-color: #f44336;
    }
    .content-right{
        flex: 0 0 300px;
        width: 300;
        height: 100px;
        background-color:  #e7e7e7;
    }
    @media screen and (max-width: 1000px){
    .content{
        width: 100%;
    }
    }
    @media screen and (max-width: 800px){
    .content-right{
        display: none;
    }
    }
    @media screen and (max-width: 600px){
    .content-left{
        display: none;
    }
    }
    //下面是HTML代码
    <div class="header">假装是淘宝网</div>
    <div class="content">
        <div class="content-left">淘宝图</div>
        <div class="content-middle">搜索框</div>
        <div class="content-right">二维码</div>
    </div>

网页最初的模样

当屏幕最宽为1000px时，content DIV变成100%

但屏幕最大宽度为800时，隐藏二维码

当屏幕最大宽度为600时，隐藏淘宝图

是不是很简单！