Visually re-ordering items

Flexbox has the ability to visually reorder items. Prior to flexbox, if you wanted to have something that came after something else in the DOM appear before it instead, you were in for a rough time. However, flexbox makes such work trivial. Let’s have a look at how it works.

Consider this markup, which you can build along with in example_04-08:

<div class="container">
    <header class="item">header</header>
    <aside class="item">aside one</aside>
    <main class="item">main</main>
    <aside class="item aside-two">aside two</aside>
    <footer class="item">footer</footer>
</div>

We will add some simple colors to more easily differentiate the sections, and stack them one under another in the same order they appear in the markup:

.container {
    background-color: indigo;
    display: flex;
    flex...