Question

我正在为我的设计使用Bootstrap布局，并且即将使其响应并节省所需的订单。例如，如：

<div class="row">
   <div class="col-sm-4 col-md-2" >div1</div>
   <div class="col-sm-4 col-md-2" >div2</div>
   <div class="col-sm-4 col-md-2" >div3</div>
   <div class="col-sm-4 col-md-2" >div4</div>
   <div class="col-sm-4 col-md-2" >div5</div>
   <div class="col-sm-4 col-md-2" >div6</div>
</div>

在md - viewports上，我会这样：

div1 div2 div3 div4 div5 div6

关于视频：

div1 div2 div3
div4 div5 div6

如何在sm-viewports上对列进行重新排序？

div1 div3 div5
div2 div4 div6

换句话说 - 每个偶数列都必须向下，每个奇数列都必须保持不变。有可能吗？

Answer 1

只需引入一组新的列：

<div class="row">
    <div class="col-sm-4 col-md-4">
        <div class="row">
            <div class="col-sm-12 col-md-6" >div1</div>
            <div class="col-sm-12 col-md-6" >div2</div>
        </div>
    </div>
    <div class="col-sm-4 col-md-4">
        <div class="row">
            <div class="col-sm-12 col-md-6" >div3</div>
            <div class="col-sm-12 col-md-6" >div4</div>
        </div>
    </div>
    <div class="col-sm-4 col-md-4">
        <div class="row">
            <div class="col-sm-12 col-md-6" >div5</div>
            <div class="col-sm-12 col-md-6" >div6</div>
        </div>
    </div>
</div>

JSFiddle demo

Answer 2

使用the col-*-push-N and col-*-pull-N column ordering classes应该可以解决问题：

<div class="row">
  <div class="col-sm-4 col-md-2" >div1</div>
  <div class="col-sm-4 col-md-2 col-md-push-2" >div3</div>
  <div class="col-sm-4 col-md-2 col-md-push-6" >div5</div>
  <div class="col-sm-4 col-md-2 col-md-pull-4" >div2</div>
  <div class="col-sm-4 col-md-2 col-md-pull-4" >div4</div>
  <div class="col-sm-4 col-md-2" >div6</div>
</div>

CodePen：http://codepen.io/anon/pen/eakfH

Bootstrap 6列响应

2 个答案: