如何更改列的堆疊順序？

使用引導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

我被困在如何實現這一點上，任何人都可以指向正確的方向嗎？

來源

2014-09-04 fightstarr20

退房'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

附：有一件事要知道，在我的示例中，我改變了列順序，以便在摺疊列時實現正確的列順序。

來源

2014-09-04 17:25:20 neilhem

好的答案，但是通過解釋'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/

來源

2014-09-04 17:27:01 belens

爲了延長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

來源

2014-09-04 18:15:41

如何更改列的堆疊順序？

回答

相關問題