flex组合流动布局实例---利用css的order属性改变盒子排列顺序

flex弹性盒子

<div class="container">
    <div class="box yellow"></div>
    <div class="container" id="container2">
        <div class="box blue"></div>
        <div class="box green"></div>
    </div>
    <div class="box red"></div>
</div>

 css

.container{
    width:100%;
    display:flex;
    flex-wrap:wrap;
}
.box{
　　width:100%;
}

@media only sccreen and (min-width:500px){
　　.dark_blue{width:50%;}
　　#container2{width:50%}
}

/*利用order来控制div块的顺序，默认为0，小于0在前，大于0在后*/

@media only sccreen and (min-width:600px){
　　.dark_blue{width:25%;order:1;}
　　#container2{width:50%}
 　.red{width:25%;order:-1;}
}