title: Angular Material Design - Change flex value with screen size
body: <p>I'm new to AngularJS so please bear with me. I'm using <a href="https://material.angularjs.org/latest/" rel="nofollow noreferrer">Angular Material Design</a> and I have difficulties in identifying a way to efficiently do responsive grids.</p>
  
  <p>Please see my comments in the code below:</p>
  
  <pre><code>    &lt;div layout="row"&gt;
  &lt;div layout="row" flex="75" layout-sm="column" class="ptn-info-grid" layout-margin&gt; &lt;!-- USING ROW FOR DESKTOP AND COLUMN FOR MOBILE DEVICES --&gt;
  
      &lt;div layout="column" flex="66"&gt; &lt;!-- I want this div occupy 2/3 of screen in Desktop but change to 100 in mobile devices (but stays in 66) --&gt;
  
  
          &lt;div layout="row" layout-sm="column"&gt;
              &lt;div class="ptn-info-grid-item" flex&gt;1&lt;/div&gt;
              &lt;div class="ptn-info-grid-item" flex&gt;2&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div layout="row" layout-sm="column"&gt;
              &lt;div class="ptn-info-grid-item" flex&gt;3&lt;/div&gt;
              &lt;div class="ptn-info-grid-item" flex&gt;4&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div layout="column" flex="32"&gt; &lt;!-- I want this div occupy 1/3 of screen in Desktop but change to 100(which actually happens) in mobile devices. Im not using 33 because while using margin for child elements this div goes out of the parent div a little. --&gt;
          &lt;div class="ptn-info-grid-item" flex style="margin-left: 0px;"&gt;Right Long
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div layout="row" flex="25" id="customer-phone-img"&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>But changing the above flex values from <code>"flex=66"</code> and <code>"flex=32"</code> to simply <code>flex</code> and flex, gives me desired result in mobile devices, however as you would know, in desktop, instead of the 2:1 ratio its occupying half and half.  </p>
  
  <p>Please also see attached images.</p>
  
  <p><strong>Expected</strong></p>
  
  <p><a href="https://i.stack.imgur.com/eZxoD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eZxoD.png" alt="a busy cat"></a><br>
  <sub>(source: <a href="http://dev.sprintu.com/imgHelp/final1.png" rel="nofollow noreferrer">sprintu.com</a>)</sub>  </p>
  
  <p><strong>How it is</strong></p>
  
  <p><a href="https://i.stack.imgur.com/zzHI4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zzHI4.png" alt="a busy cat"></a><br>
  <sub>(source: <a href="http://dev.sprintu.com/imgHelp/final2.png" rel="nofollow noreferrer">sprintu.com</a>)</sub>  </p>
  
  <p>So I'm looking for a way to change the flex value for smaller screens (for when <code>layout-sm</code> is applied - change <code>flex=66</code> to <code>flex=100</code>).</p>