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.然而，在移动设备上，而不是A在顶部，我希望B先成为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）？

1 个答案: