在移动

Question

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

Answer 1

由于您拥有 flexbox 标记，因此我将为您提供 Flexbox 解决方案：

＆＃13;

＆＃13;

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 */
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您也可以使用 网格 执行此操作：

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;