查看引导程序 v4 更新:
https://getbootstrap.com/docs/4.0/migration/#grid-system-1
...为新的 flexbox 驱动的订单类删除了推和拉修饰符类。例如,您可以使用 .col-8.order-2 和 .col-4.order-1 而不是 .col-8.push-4 和 .col-4.pull-8。
但是当我使用 order 函数时,它似乎与 push pull 方法不同。它像下面代码中的第一行一样堆叠行。
我的目标是左侧有一个 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>
Run Code Online (Sandbox Code Playgroud)