在移动设备上更改元素的顺序

Question

我有一个带有两个列的引导程序行，它们在大屏幕设备上中断。在台式机one之前是two-是否可以轻松调整以调整两个元素的顺序，因此在移动设备two上是one之前。

我需要JS吗？

<div className="row mx-0">
    <div className="col-lg-6 one">
         //
    </div>
    <div className="col-lg-6 two">
         //
    </div>
</div>

Answer 1

使用order响应式类：

<div class="row">
  <div class="col order-lg-2 order-1">Column 1</div>
  <div class="col order-lg-1 order-2">Column 2</div>
</div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row mx-0">
<div class="bg-light col order-lg-2 order-1">Column 1
</div>
<div class="bg-secondary text-white col order-lg-1 order-2">Column 2
</div>
</div>
</div>