switching stack order of floats with flex
responsive stacking, changing the order of how they stack. so by default they should stack in order they are listed in, like if the pink box is 1st then it should stack on top of the blue box when it goes under 800px width. by using the flex and order we can change the order in which they stack at 800px
Example switching the order
Codepen Example
See the Pen Grid Stacking by Luke (@kruxor) on CodePen.
HTML
<div class="wrapper">
<div class="pink">
</div>
<div class="blue">
</div>
</div>CSS
.wrapper {
display: flex;
flex-flow: row wrap;
}
.pink {
background: pink;
width: 50%;
height: 300px;
}
.blue {
background: blue;
width: 50%;
height: 300px;
}
@media screen and (max-width:800px) {
.pink {
order: 2;
width: 100%;
}
.blue {
order: 1;
width: 100%;
}
}