使用引导推拉更改列顺序答案

【问题标题】：Change column order using bootstrap push and pull使用引导推拉更改列顺序
【发布时间】：2015-06-12 08:38:42
【问题描述】：

我有 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。

【问题讨论】：

这是一个靴子：bootply.com/WO6AuZ3PX0
您希望在什么屏幕尺寸上居中而其他屏幕尺寸为 col-6？

标签： html css twitter-bootstrap-3 responsive-design

【解决方案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

【讨论】：

【解决方案2】：

由于 bootstrap-3 被设计为“移动优先”，因此您应该重新考虑如何设置列。您应该根据您希望它在移动设备上的外观进行设计...嗯，首先，然后随着屏幕变大进行推/拉调整（或任何其他调整）。

所以：

  <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>

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

【讨论】：

【解决方案3】：

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

Bootstrap 是一个“移动优先”的框架，因此您的 HTML 应该反映您网站的移动版本。然后在更大的屏幕上完成推拉。

【讨论】：