更改移动中容器的顺序

Question

我正在使用 w3.css，想在移动设备上更改容器的顺序（查看下面的屏幕截图）。 w3.css 中是否有任何有助于更改块顺序的类？我不想使用标准的 css flex，只想使用 w3.css

Answer 1

既然你有 flexbox 标签，我给你 Flexbox 解决方案：

body {
  color: #fff;
}

.parent {
  display: flex; /* displays the children inline */
}

.child {
  flex: 1; /* children take as much horizontal space as they can */
  height: 100px;
}

.A {
  background: blue;
}

.B {
  background: red;
}

@media screen and (max-width: 568px) { /* adjust to your needs */
  .parent {
    flex-direction: column; /* stacks the children vertically */
  }
  .A {
    order: 2; /* changes the order, i.e. displays the .A below the .B */
  }
}

<div class="parent">
  <div class="child A">A</div>
  <div class="child B">B</div>
</div>

您也可以使用 Grid：

body {
  color: #fff;
}

.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* could also use: 1fr 1fr or 50% 50% without the repeat() */
  grid-template-rows: repeat(2, minmax(100px, auto)); /* minimum height 100px, maximum height unlimited, adjust to your needs, you can also remove it, not mandatory */
}

.A {
  background: blue;
}

.B {
  background: red;
}

@media screen and (max-width: 568px) {
  .parent {
    grid-template-columns: 1fr; /* could also use: 100% */
  }
  .A {
    order: 2;
  }
}

<div class="parent">
  <div class="A">A</div>
  <div class="B">B</div>
</div>