Question

我正在使用bootstrap，并希望我的列只能在xs视图中重新排序。

例如：

大屏幕 - 平板电脑这就是它的样子：

A栏------- B栏

我遇到的问题是当我到达xs时，它看起来像这样：

A栏
B栏

当我希望它看起来像这样：

B栏
A栏

Answer 1

你只需要反转列上的浮点数。看看下面的片段。

DEMO

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-md-6 col-sm-6 col-xs-12 pull-right">
    Column B
  </div>
   <div class="col-md-6 col-sm-6 col-xs-12">
     Column A
  </div>
</div>

Answer 2

您可以使用Bootstrap Column Reordering

轻松完成此操作

工作示例;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container text-center">
  <div class="row">

    <div class="col-sm-6 col-sm-push-6">
      <div class="alert alert-danger">
        B
      </div>
    </div>

    <div class="col-sm-6 col-sm-pull-6">
      <div class="alert alert-info">
        A
      </div>
    </div>

  </div>
</div>

＆＃13;

Bootstrap重新排序col-xs-12

2 个答案: