title: Angular Flex Layout: Responsive layout combining row and column
body: <p>Im learning <a href="https://github.com/angular/flex-layout" rel="noreferrer">flex-layout</a>, and I'm trying to create a responsive UI. 
  I have years of experience with bootstrap grid system, but I can't seem to understand how to accomplish the following (<a href="http://akveo.com/ngx-admin/#/pages/dashboard?utm_source=github&amp;utm_medium=ngx_admin_readme&amp;utm_campaign=demo" rel="noreferrer">live demo</a>):</p>
  
  <p>On large monitors: 
  <a href="https://i.stack.imgur.com/G5U2L.png" rel="noreferrer"><img src="https://i.stack.imgur.com/G5U2L.png" alt="enter image description here"></a></p>
  
  <p>On medium monitors: 
  <a href="https://i.stack.imgur.com/wXw8Y.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wXw8Y.png" alt="enter image description here"></a></p>
  
  <p>On mobile: </p>
  
  <p><a href="https://i.stack.imgur.com/QKG6e.png" rel="noreferrer"><img src="https://i.stack.imgur.com/QKG6e.png" alt="enter image description here"></a></p>
  
  <p>If I understand it correctly, I have to use a combination of <code>rows</code> and <code>columns</code>, like the below code</p>
  
  <pre><code>    &lt;div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center"&gt;
        &lt;div fxFlex="25%"&gt; ..code left out..&lt;/div&gt;
        &lt;div fxFlex="25%"&gt; ..code left out..&lt;/div&gt;
        &lt;div fxFlex="25%"&gt; ..code left out..&lt;/div&gt;
        &lt;div fxFlex="25%"&gt; ..code left out..&lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>On small screen, the layout changes from <code>row</code> to <code>column</code>, meaning I have implemented the UI examples above for large and mobile monitors.</p>
  
  <p><strong>Question:</strong> How can I implement the UI for medium monitors (see above picture)? I cant understand how to combine <code>row</code> and <code>column</code></p>