title: How to swap grid positions (materializecss) on different devices?
body: <p>I'm building a website using <a href="http://materializecss.com/grid.html" rel="nofollow">MaterializeCSS</a></p>
  
  <p>I have two boxes:
  A (col s12 m8 l8)
  B (col s12 m4 l4)</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;!-- Box A --&gt;
          &lt;div class="col s12 m8 l8"&gt;
              &lt;!-- details --&gt;
          &lt;/div&gt;
  
          &lt;!-- Box B --&gt;
          &lt;div class="col s12 m4 l4"&gt;
              &lt;!-- details --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>On desktop I like it the way it is, Box A on the left and B on the right. However, on mobile, instead of A being on top, I want B to be first then A. I've tried <code>float: right</code> to the box A but it didn't work. How can I achieve this result? </p>