title: How to make @angular/flex-layout wrap based on screensize
body: <p>I have 3 divs which i can make bigger or smaller based on the screen-size but cant get it to wrap like bootstrap. So for small screens i want the divs to be stacked vertically, large screen horizontally. eg <a href="https://i.stack.imgur.com/NRtXV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NRtXV.png" alt="enter image description here"></a> Anyone know how i do this with Angular2? I chose to use the @angular/flex-layout which i npm'd. </p>
  
  <p>Note: I dont think there is anything in the 'colored box' thats conflicting with anything.</p>
  
  <p>Here is my code...</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    //templateUrl: './app/app.component.html',
    template:`
  
  &lt;div class="flex-container" fxFlex=100&gt;
        &lt;div class="colored box" &gt;
          &lt;div fxFlex.lg=100 fxFlex.md=50&gt;  flexible for screensize  &lt;/div&gt;
          &lt;div fxFlex.lg=100&gt; fxFlex &lt;/div&gt;
          &lt;div fxFlex=33&gt; fxFlex &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="version"&gt;@angular/flex-layout (v2.0.0-beta.0)&lt;/div&gt;
    `,
    styleUrls: ['./app/app.component.css']
  })
  export class AppComponent  { 
  
  }
  </code></pre>