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...