Question

是否已经通过使用已经定义的Bootstrap 3类获得以下div布局？我想尽可能避免使用媒体查询。

台式机

[[1] 1] [2]
[3个]

移动

[[1] 1]
[3个]
[[2 2]]

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

Answer 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

编辑：我的错误，代码已修复，这是一个bootply example

Answer 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首先是移动设备，并且应使用从最小到最大的类。

使用Bootrap 3重新排序div

2 个答案: