时间戳

首页 > 解决方案 > 引导网格响应

html - 引导网格响应

问题描述

例如，我有一个带有代码的 3 列布局。现在，当浏览器窗口变小时，它会从顶部的第一列堆叠，中间的第二列，然后按预期的最后第三列。当列变小时，我希望列以这种方式运行。 

First - This column gets hidden and I have already established that in the CSS
Third - This is the first column on top. 
Second- This column is on bottom.

<div class="row">
  <div class="col-sm-3">First</div>
  <div class="col-sm-6">Second</div>
  <div class="col-sm-3">Third</div>
</div>

标签： htmlbootstrap-4

解决方案

使用.order-类来控制内容的视觉顺序。

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      First, but unordered
    </div>
    <div class="col-sm-6 order-12">
      Second, but last
    </div>
    <div class="col-sm-3 order-1">
      Third, but first
    </div>
  </div>
</div>

推荐阅读