如何在移动设备和台式机中堆叠两个不同的元素？

Question

我在狭窄的bootstrap col3列中包装了两个元素。我希望它在桌面上按顺序显示1和2。然后是2和1（移动版）。浮动似乎不起作用。

Answer 1

这是演示代码：

.custom {
  display: flex;
  flex-direction: column;
}

@media(max-width: 480px) {
  .custom {
    flex-direction: column-reverse;
  }

}

<div class="container">
  <div class="row custom">
    <div class="col-xs-1 col-md-1 col-lg-1">
      <span>
        Box 1, class is just for demonstration
      </span>
    </div>
    <div class="col-xs-1 col-md-1 col-lg-1">
      <span>
        Box 2, class is just for demonstration
      </span>
    </div>
  </div>
</div>

Answer 2

Cuong的答案对于这种特定情况非常有用，但是对于有问题的容器中存在两个以上元素的情况，CSS Flexbox提供了order属性，可用于更改flexbox中包含的HTML元素的顺序（或甚至CSS网格）。这是一个示例：

.grid {
  display: flex;
  flex-direction: column;
}
.foo {
  width: 100px;
  height: 100px;
  background: #BADA55;
  margin: 1rem;
}

@media(max-width: 520px) {
  .second {
    order: -1;
  }
}

<div class="grid">
  <div class="foo first">1</div>
  <div class="foo second">2</div>
  <div class="foo third">3</div>
</div>

有关更多信息，请参阅MDN Documentation。