Bootstrap 单行中的列重新排序/堆叠

Question

对于桌面版本，我连续 3 列

brand-(length 3), search-(length 7) & cart-(length-2)

------------------------------------------------
|  Brand |           Search            |  Cart |
------------------------------------------------

在桌面模式下查看时，这三列应如上所示，但在折叠或在移动浏览器中查看时，顺序应如下所示，并且应与下图相同

brand-(length 6), cart-(length-6) & search-(length 12)

------------------------------------------------
|           Brand      |         Cart          |
------------------------------------------------
|                   Search                     |
------------------------------------------------

Answer 1

您可以使用 Column Reordering（推 + 拉）在视口更改大小时更改顺序。您必须以相反的顺序放置两列并对它们应用 col-*push-* / col*-pull-* 以便堆栈顺序发生变化。

请参阅整页的工作示例代码段。

body {
  padding-top: 50px;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-3">
      <div class="alert alert-info">Brand</div>
    </div>
    <div class="col-xs-6 col-sm-push-6 col-sm-3 ">
      <div class="alert alert-danger">Cart</div>
    </div>
    <div class="col-xs-12 col-sm-pull-3 col-sm-6">
      <div class="alert alert-warning">Search</div>
    </div>
  </div>
</div>

Bootstrap 单行中的列重新排序/堆叠

Bootstrap Column re-ordering / stacking in single Row

css-float

twitter-bootstrap

twitter-bootstrap-3