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