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
<div fxLayout="{{ direction }}" fxLayout.xs="column" >