3

(main)

Using flexbox and box-ordinal-group CSS properties, we can change the order of elements on a page at different viewport sizes. In this very basic example I initiate flexbox via a media query in my global styles stylesheet so that only browsers that can a) read media queries and b) have smaller viewports than 33em (i.e smartphones and i.e not IE<9) see the re-ordered items. The numbered labels represent the order they appear in the code - resize your browser to see them change if you are on a desktop.

Support for this technique is widespread among smartphones, it is safe to use to re-order page contents for mobile and tablet devices.