Mozilla Holy-Grail Layout Illustrated here is the case where the page layout suited to a browser window must be optimized for a smart phone window. Not only must the elements reduce in size, but the order in which they are presented must change. Flexbox makes this very simple
header
article
footer
<div fxLayout="{{ direction }}" fxLayout.xs="column" >