Changing the source order

Flexbox has the ability to re-order 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">Side one</aside>
    <main class="item">Content</main>
    <aside class="item aside-two">Side 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-direction...