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

Question

构建网站

我有两个盒子： 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，右边是盒子 B。但是，在移动设备上，我希望 B 先在 A 之后，而不是 A 在最上面。我已经尝试 float: right 到方框 A，但它没有用。我怎样才能达到这个结果？

Answer 1

您可以使用灵活的框方法。根据您想要的值修改 max-width。 600px 是根据 MaterializeCSS grid documentation 的移动设备宽度。

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

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

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

html

css

responsive-design

grid-layout

materialize