css - 如何在移动设备上重新排序引导列？

Question

我在桌面上有 4 个列，如下所示，我希望它们重新排序，使其在移动设备上如下所示。我需要为此定制css吗？

（我还不能发布图片，所以这里是图片的链接：） https://imgur.com/a/sasLETe

我曾尝试将它们保存在每个两个的父列中，但无济于事。我是后端的人，所以我对前端的东西不太熟悉。

当前的 HTML：

<div class="row">
  <div class="col-md-6 col-sm-12">
    <div>A</div>
    <div>C</div>
  </div>
  <div class="col-md-6 col-sm-12">
    <div>B</div>
    <div>D</div>
  </div>
</div>

我希望它的行为与我在图像中描绘的一样。

我该怎么做呢？我不想求助于 JavaScript。任何帮助表示赞赏。

谢谢。

标签： cssbootstrap-4less

Answer 1

如果您使用 html 结构，则无需自定义 css。只需更新代码中的类和内容，如下所示：

<div>
    <div class="row">
        <div  class="col-md-6 col-sm-12">A</div>
        <div  class="col-md-6 col-sm-12">B</div>
     </div>
     <div class="row" >
        <div class="col-md-6 col-sm-12">C</div>
        <div class="col-md-6 col-sm-12">D</div>
     </div>
</div>
```