title: materialize grid s12 not working in mobile view
body: <p>I am trying to built a website using ruby on rails which will have different styling on different screen sizes.I'm using materializecss to do so.</p>
  
  <p>Facing an issue for:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col m2 l3 blank"&gt;&lt;/div&gt;
    &lt;div class="col s12 m8 l6 yield"&gt;
      &lt;%= yield %&gt;
    &lt;/div&gt;
    &lt;div class="col m2 l3 blank"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>'div blank' is for blank space on left-right sides of 'div yield'</p>
  
  <p>i wanted the div.yield to take 50% screen for large screen(laptops) , 66% for medium screen(tablets) and 100% screen for small screen(mobiles)</p>
  
  <p>I got desired results when i tested this on chromium browser on my dekstop. On window resizing, 'div yield' is taking 100% screen size on width&lt;600px and 50% on width>992px.</p>
  
  <p>Everything worked fine till now.</p>
  
  <p>But when i switched to mobile emulation mode of chromium, 'div yield' was not accepting s12 class for width&lt;600px ,instead m8 class was serviced for width&lt;600px.</p>
  
  <p>Below is the screenshot of both results</p>
  
  <p>Left one is of chromium browser under normal mode whose width is reduced to 357px.(this is my desired result</p>
  
  <p>Right one is of chromium browser under mobile emulation mode, width set to 357px. In this m8 class is served instead of class s12. (not desired) </p>
  
  <p><a href="https://i.stack.imgur.com/7pKX6.png" rel="nofollow noreferrer">screenshot</a></p>
  
  <p>Why is this happening, and how to fix it?</p>