在移动

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＆＃39; flexbox。

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

全屏运行以下代码段并调整窗口大小以查看元素顺序的变化。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

以下代码对我有用：

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

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

Answer 3

.col-xs-12 { height: 200px; position:relative; }
.col-xs-12 div { position:absolute; top:0; left: 0; width:100%; }
.col-xs-12 div:last-child { top: auto; bottom: 0; }

@media (max-width: 480px) {
    .col-xs-12 div { top:auto; bottom:0; }
    .col-xs-12 div:last-child { top: 0; bottom: auto; }
}