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

<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>

.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;}}