在移动设备上将div从上到下移动

Question

我可以使用bootstrap本地执行此操作吗？我正在使用版本4(在alpha中),但如果它适用于版本3,它应该适用于v4.

我在列中有2个div就像这样

<div class="row">
    <div class="col-xs-12">
        <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>
        <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>
    </div>
</div>

有没有办法可以让div在移动设备上交换？我不想在这里使用任何javascript,我想只使用"bootstrap"类,如果可能的话.

如果使用bootstrap是不可能的,那么请仅使用css.

Answer 1

不知道使用bootstrap实现此目的的方法,但可以使用CSS'来完成flexbox.

• 添加.col-xs-12具有以下属性的新选择器:
  • display: flex;告诉孩子们使用flexbox模型
  • flex-direction: column-reverse; 将确保孩子从下到上流动(而不是默认从左到右)

全屏运行以下代码段并调整窗口大小以查看元素的顺序更改.

@media only screen and (max-width: 960px) {
  .col-xs-12 {
    display: flex;
    flex-direction: column-reverse;
  }
}

<div class="row">
  <div class="col-xs-12">
    <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>
    <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>
  </div>
</div>

Answer 2

以下代码对我有用：

@media only screen and (max-width: 768px) {
  .xs-column-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

<div class="row">
  <div class="col-xs-12 xs-column-reverse">
    <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>
    <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>
  </div>
</div>