如何在不同的设备上交换网格位置(materializecss)？

Question

我正在使用MaterialiseCSS构建一个网站

我有两个盒子: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>

在桌面上,我喜欢它的方式,左边是方框A,右边是方框.然而,在移动设备上,而不是A在顶部,我希望B先成为A.我已经尝试过float: rightA但是它没有用.我怎样才能达到这个效果？

Answer 1

您可以使用灵活的方法.max-width根据您想要的值修改.600px是根据MaterialiseCSS网格文档的移动设备宽度.

@media (max-width: 768px) {
  .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/0.97.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>