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