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

因为bootstrap-3被设计为＆＃34;移动优先＆＃34;，您应该重新考虑如何设置列。您应该根据自己想要的方式设计移动设备...首先，然后在屏幕变大时进行推/拉调整（或任何其他调整）。

所以：

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

如果你在这些内容中没有太多内容，你可以随时作弊并定义两个部分，一个用于较小的屏幕，另一个用于较大的屏幕，如下所示：

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

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

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

使用bootstrap push和pull更改列顺序

3 个答案: