如何更改列的堆叠顺序？

问题描述：

使用引导3，我有一个非常简单的布局，如：如何更改列的堆叠顺序？

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-4"> 
      Header Content Left 
     </div> 
     <div class="col-sm-4"> 
      Header Content Middle 
     </div> 
     <div class="col-sm-4"> 
      Header Content Right 
     </div> 
    </div> 
</div>

JSFiddle

在更小的设备，而不是它的自然顺序堆叠我想这堆像这样：

Header Content Middle 
Header Content Right 
Header Content Left

我被困在如何实现这一点上，任何人都可以指向正确的方向吗？

退房'push'和'pull' - 见列顺序这里HTTP： //getbootstrap.com/css/ – Dan 2014-09-04 17:13:38

也很想知道这个！很好的问题 – jleggio 2014-09-04 17:16:49

这个链接，http://getbootstrap.com/css/#grid-column-ordering是@Dan试图指出的。我肯定会使用http://www.bootply.com/而不是jsfiddle来解决这个问题。 – 2014-09-04 17:18:41

答

Bootstrap的col-**类有position: relative;属性。因此，当您另外设置col-**-push-**或col-**-pull-**类时，可以使用left或right属性更改列顺序移动。

你可以尝试这样的：在Codepen

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-4 col-sm-push-4"> 
     Header Content Middle 
    </div> 
    <div class="col-sm-4 col-sm-push-4"> 
     Header Content Right 
    </div> 
    <div class="col-sm-4 col-sm-pull-8"> 
     Header Content Left 
    </div> 
    </div> 
</div>

例子是here

附：有一件事要知道，在我的示例中，我改变了列顺序，以便在折叠列时实现正确的列顺序。

好的答案，但是通过解释'pull- *'和'push- *'类可以做得更好，因为它可能不会立即显现在OP – Bojangles 2014-09-04 17:26:33

感谢您的解释，我做了一些阅读，我想我已经掌握了它 – fightstarr20 2014-09-04 17:58:56

答

使用推/拉班这样来实现你想要的：

<div class="container"> 
<div class="row"> 
    <div class="col-sm-4 col-sm-push-8"> 
     Header Content Left 
    </div> 
    <div class="col-sm-4 col-sm-pull-4"> 
     Header Content Middle 
    </div> 
    <div class="col-sm-4 col-sm-pull-4"> 
     Header Content Right 
    </div> 
</div>

http://jsfiddle.net/DTcHh/1040/

答

为了延长neilhem的回答，push and pull修饰符是你在找什么。

从DOC：

轻松与.COL-MD-推*和.COL-MD-上拉*修饰符的类改变我们的内置网格列的顺序。

基本上，这些修饰符是根据您提供的偏移量（向右移动）或拉动（向左移动），其中起点基于列内的列顺序该行。可以这样写：

/* column size direction offset */ 
    .col -sm -push  -4

因此，对于你的榜样，你想要的东西，如：

<div class="row"> 
    <!--first column so start at 0 then push it to the right 4 --> 
    <div class="col-sm-4 col-sm-push-4"> 
     Header Content Middle 
    </div> 

    <!-- start at 4 then push to the right 4 --> 
    <div class="col-sm-4 col-sm-push-4"> 
     Header Content Right 
    </div> 

    <!-- start at 8 then pull to the left 8 --> 
    <div class="col-sm-4 col-sm-pull-8"> 
     Header Content Left 
    </div> 
    </div>

DEMO

这里是一个可视化故障怎么回事：

重排序之前：
```
[ column 1 ][ column 2 ][ column 3 ] 
```
example

推第一塔4的偏移量：

[ offset 4 ][ column 1-2 ][ column 3 ] 
        ^they are on top of each other at this point

example

推第二列4偏移：

[  offset 4 ][ column 1 ][ column 2-3 ] 
             ^they are on top of each other at this point

example

拉动第三列8偏移：

[  column 3 ][ column 1 ][ column 2  ] 
    ^column 3 falls into the open offset caused by column 1's push

example

如何更改列的堆叠顺序？

相关推荐