Question

我有一个3列网格，当断点很大时需要翻转列顺序。

在小断点处，列应显示col3 col2 col1
在中间断点处，列应显示col2 col1 col3
在大断点列处应显示col 1 col2 col3

此JSFiddle对col-sm和col-md断点的行为正确。我尝试添加推/拉类来影响所需的大断点行为（上面的条件3）但是无法使其工作。我想我也会因为在col-md发生的订单而被绊倒。我想要小，中，大订购行为。这是如何完成的？

<div class="container">
  <div class="row-fluid">
    <div class="col-xs-12 col-sm-12  col-md-3 col-md-push-9 bg-warning">
      column 3
    </div>
    <div class="col-xs-12 col-sm-12  col-md-5 col-md-pull-3  bg-danger">
      Column 2
    </div>
    <div class="col-xs-12 col-sm-12  col-md-4 col-md-pull-3  bg-success">Column 1
    </div>
  </div>
</div>

Answer 1

我终于明白了。这是JSFiddle中的解决方案。

<div class="container">
  <div class="row-fluid">
    <div class="col-xs-12 col-sm-12  col-md-3 col-md-push-9 bg-warning">
      column 3
    </div>
    <div class="col-xs-12 col-sm-12  col-md-5 col-md-pull-3 col-lg-push-1 bg-danger">
      Column 2
    </div>
    <div class="col-xs-12 col-sm-12  col-md-4 col-md-pull-3  col-lg-pull-8 bg-success">Column 1
    </div>
  </div>
</div>

在Bootstrap中翻转3列网格顺序

1 个答案: