调整屏幕大小时，排序引导程序5列

Question

我正在尝试反转引导中的锁定顺序

我在一行中有以下两列

A栏-B栏(除手机外的所有屏幕上(

当屏幕变小或加载到移动设备上时，我希望列以相反的顺序堆叠

B列

Col A(在手机上，每隔一个屏幕调整大小时(

HTML

<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-lg-8 col-sm-12">
<p>A</p>
</div>
<div class="col-md-4 col-lg-4 col-sm-12">
<p>B</p>
</div>
</div>

Answer 1

您可以使用.order-引导程序类来控制内容的视觉顺序。将其与断点混合以使订单类似于.order-sm-*或.order-md-*

例如

<div class="col-md-8 col-lg-8 col-sm-12 order-sm-2">

所以代码就像

<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-lg-8 col-sm-12 order-sm-2">
<p>A</p>
</div>
<div class="col-md-4 col-lg-4 col-sm-12 order-sm-1">
<p>B</p>
</div>
</div>
</div>