使用 bootstrap 推拉更改列顺序

Question

我有 3 列，顺序如下：

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-sm-3">left column</div>
    <div class="col-sm-6">center column</div>
    <div class="col-sm-3">right column</div>
  </div>
</div>

而且我想通过推拉重新排序。我需要顶部的中心列，其他列的大小为 6。

Answer 1

如果你的内容不多，你可以随时作弊，只定义两个部分，一个用于小屏幕，一个用于大屏幕，像这样：

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row hidden-sm">
    <div class="col-sm-3">left column</div>
    <div class="col-sm-6">center column</div>
    <div class="col-sm-3">right column</div>
  </div>
  <div class="row visible-sm">
    <div class="col-sm-12">center column</div>
    <div class="col-sm-6">left column</div>
    <div class="col-sm-6">right column</div>
  </div>
</div>

http://www.bootply.com/dUD8yYL0YP

Answer 2

因为 bootstrap-3 被设计为 "mobile first"，您应该重新考虑您的列的设置方式。您应该根据您希望它在移动设备上的显示方式进行设计……嗯，首先，然后随着屏幕变大进行 push/pull 调整（或任何其他调整）。

所以：

  <div class="row">
    <div class="col-sm-6 bg-info col-sm-push-3">center column</div>
    <div class="col-sm-3 bg-success col-sm-pull-6">left column</div>
    <div class="col-sm-3 bg-danger">right column</div>
  </div>

您尚未指定您希望它们在其他设备上如何反应，但这应该可以帮助您入门。

Answer 3

我找到了一个很好的答案，它可能对你有用 Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3

Bootstrap 是一个 "mobile first" 框架，因此您的 HTML 应该反映您网站的移动版本。然后在较大的屏幕上完成推和拉。

使用 bootstrap 推拉更改列顺序

Change column order using bootstrap push and pull

html

css

responsive-design

twitter-bootstrap-3