Question

桌面版本连续有3列

品牌 - （长度3），搜索 - （长度7）＆amp; cart-（长度-2）

(i,j) = (2,2)

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

品牌 - （长度6），购物车 - （长度-6）＆amp;搜索 - （长度12）

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

Answer 1

您可以使用Column Reordering（按下+拉动）更改视口更改大小时的顺序。您必须以相反的顺序放置这两列，并将col-*push-* / col*-pull-*应用于它们，以便更改堆栈顺序。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap Column在单行中重新排序/堆叠

1 个答案: