如何在不同设备上交换网格位置（materializecss）？

Question

我正在使用MaterializeCSS建立一个网站。

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

在桌面上，我喜欢现在的样式，Box A在左侧，Box B在右侧。但是，在移动设备上，我希望B先于A排列，而不是A在上方。我尝试了将Box A设置为float:right，但它没有生效。有什么方法可以实现这个结果？

- Chuck K

Answer 1

你可以使用弹性盒模型方法。根据你想要的值修改 max-width。根据MaterializeCSS 网格文档，600px 是移动设备的宽度。

@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>

- m4n0

---

没问题。 :) 只需检查浏览器支持情况：http://caniuse.com/#search=flexbox - m4n0