How to make @angular/flex-layout wrap based on screensize : <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>
