我有一个小问题。 我在 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 列在外面 :(
谢谢
答案 0 :(得分:0)
您可以轻松地在 bootstrap 中重新排列列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>