How to swap grid positions (materializecss) on different devices?

Question

I'm building a website using MaterializeCSS

I have two boxes: A (col s12 m8 l8) B (col s12 m4 l4)

<div class="container">
    <div class="row">
        <!-- Box A -->
        <div class="col s12 m8 l8">
            <!-- details -->
        </div>

        <!-- Box B -->
        <div class="col s12 m4 l4">
            <!-- details -->
        </div>
    </div>
</div>

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 float: right to the box A but it didn't work. How can I achieve this result?

Answer 1

You can use the flexible box approach. Modify the max-width according to your desired value. 600px is mobile device width according to MaterializeCSS grid documentation.

@media (max-width: 600px) {
  .flex-s {
    display: flex;
    flex-direction: column; /* Stack on top */
  }
  .box-a {
    order: 2; /* Go down, bring Box B up */
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<div class="container">
  <div class="row flex-s">
    <!-- Box A -->
    <div class="col s12 m8 l8 box-a">
      Box A
    </div>

    <!-- Box B -->
    <div class="col s12 m4 l4 box-b">
      Box B
    </div>
  </div>
</div>