使用引导推拉更改列顺序

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

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

So:

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

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