使用 Bootstrap 3 重新排序 div答案

【问题标题】：Reordering divs with Bootstrap 3使用 Bootstrap 3 重新排序 div
【发布时间】：2019-07-17 15:42:40
【问题描述】：

是否可以使用已定义的 Bootstrap 3 类获得以下 div 布局？如果可能的话，我想避免使用媒体查询。

桌面

[ 1 ][ 2 ]
[ 3 ]

移动

[            1            ]
[           3            ]
[           2            ]

我尝试过首先考虑移动设备对 div 进行编码，然后通过推拉来更改桌面上的顺序，但是使用这些类的这种特殊布局只是将 div 推拉出视口，而不是将它们包装在12 列网格并将它们向上或向下移动一行。

【问题讨论】：

标签： html css layout twitter-bootstrap-3

【解决方案1】：

<div class="container" style="background-color:grey">
  <div class="row">
    <div class="col col-sm-12 col-md-8" style="background-color:blue">
      1 of 3
    </div>
    <div class="col col-sm-12 col-md-4" style="background-color:red">
      2 of 3
    </div>
    <div class="col col-12" style="background-color:green">
      3 of 3
    </div>
  </div>
</div>

使用 Bootstrap 的列网格功能应该可以解决您的要求。 References - Bootstrap Docs

编辑：我的错误，代码已修复，这是一个引导程序 example

【讨论】：

【解决方案2】：

据我所知，这在 Bootstrap 3 中是不可能的。如果您可以将其更新到 Bootstrap 4，您可以使用 flex 布局重新排序。


<div class="container">
  <div class="row">
    <div class="col-12 col-sm-9 order-0 order-sm-0">
      1
    </div>
    <div class="col-12 col-sm-3 order-2 order-sm-1">
      2
    </div>
    <div class="col-12 order-1 order-sm-2">
      3
    </div>
  </div>
</div>

请注意，Bootstrap 是移动优先的，应从最小到最宽使用类。

【讨论】：