查看bootstrap v4更新:
https://getbootstrap.com/docs/4.0/migration/#grid-system-1
...为新的flexbox驱动的订单类删除了push和pull修饰符类。例如,代替.col-8.push-4和.col-4.pull-8,你可以使用.col-8.order-2和.col-4.order-1。
但是当我使用order函数时,它似乎与推拉方法的工作方式不同。它将行堆叠起来,就像下面代码中的第一行一样。
我的目标是在左边有一个img,右边有一行文本,然后是左边的文本,另一行是桌面上下一行的img。当它在较小的屏幕中调整大小时,我希望每个图像堆叠在它对应的文本的顶部。
<div class="container">
<div class="row">
<div class="col-md-4">
<!--img-->
</div>
<div class="col-md-8">
<!--text-->
</div>
</div>
<div class="row">
<div class="col-md-8 order-2">
<!--text-->
</div>
<div class="col-md-4 order-1">
<!--img-->
</div>
</div>
</div>
答案 0 :(得分:3)
如果您想在md
上更改订单,则可以为该尺寸定义第一个正常订单,然后为所有较小尺寸定义order-n
。所以你的代码应该是这样的。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4">
img
</div>
<div class="col-md-8">
text
</div>
</div>
<div class="row">
<div class="col-md-8 order-2 order-md-1">
text
</div>
<div class="col-md-4 order-1 order-md-2">
img
</div>
</div>
</div>