One such property that I’ve found myself using repeatedly is
order. We can assign a numeric value to a set of elements and the browser will reorder those elements on the screen — without manipulating the DOM.
order property in the following example to see the technique in effect:
The flexbox order property mAVYGy
So where is this useful? There’s a bunch of scenarios you might like to utilise this property: one example is bringing a navigation
<aside> to the top of the screen on a mobile optimised layout.
If you resize your browser to a phone-width and inspect the source of icelab.com.au, you’ll see that the navigation bar in the footer exists below the contact detail elements in the DOM. But thanks to our friend
order, we can completely rearrange the layout for this context. Neat!