Re-order HTML blocks using CSS3 - Flexbox FlexFlow

Re-order HTML blocks using CSS3 - Flexbox FlexFlow

by jeremykenedy

HTML

<div class="container">
    <div class="first">first</div>
    <div class="second">second</div>
</div>

CSS

.container {
    display: flex;
    flex-flow: column-reverse;
    padding: 0;
}
div {
    color: white;
    background: red;
    padding: 10px;
}
div:last-of-type {
    background: blue;
}