使用推/拉更改 Bootstrap 3 中 col-*-12 列的顺序

Question

我有一个小问题。 我在 xs 和 sm 上有这样的三列：

[A]

[B]

[C]

在 md 和 lg 上，我想要这个：

[B]

[A][C]

这个我试过了，还是不行：

<div class="col-xs-12 col-md-8 col-md-push-12">
  Col A
</div>
<div class="col-xs-12 col-md-12 col-md-pull-12">
  Col B
</div>
<div class="col-xs-12 col-md-4">
  Col C
</div>

A列和B列在外面:(

谢谢

Answer 1

您可以轻松地在引导程序with the order classes. 中重新排序列

使用 .order- 类来控制内容的视觉顺序。这些类是响应式的，因此您可以通过断点设置顺序（例如，.order-1.order-md-2）。

关于如何在小屏幕上重新排列 Col B 和 Col C 的示例：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
  <div class="col-xs-12 col-md-8 ">
    Col A
  </div>
  <div class="col-xs-12 col-md-12 order-sm-3">
    Col B
  </div>
  <div class="col-xs-12 col-md-4 order-sm-2">
    Col C
  </div>
</div>