title: @angular/flex-layout How To: different class based on screensize?
body: <p>Is there a way to have @angular/flex-layout change the <strong>class</strong> based on screen size?</p>
  
  <p>I know I can do this:   </p>
  
  <pre><code>&lt;div fxFlex="grow" fxLayout="row" fxLayout.xs="column"&gt;
  </code></pre>
  
  <p>and this:</p>
  
  <pre><code>&lt;div fxFlex="22"    fxFlex.md="10px" fxHide.lg&gt;
  </code></pre>
  
  <p>etc.</p>
  
  <p>I'd like to be able to do something like this:</p>
  
  <pre><code>&lt;div class="myWideClass" class.xs="myNarrowClass"&gt;
  </code></pre>
  
  <p>Is there any way to do this kind of thing - change the class based on the screen width? </p>
  
  <p>Thanks!</p>