Bootstrap 6列響應

我爲我的設計使用Bootstrap佈局，並且即將使其響應並保存所需的順序。例如，像這樣的：Bootstrap 6列響應

<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 - 視我會得到這樣的：

div1 div2 div3 div4 div5 div6

在SM-視：

div1 div2 div3 
div4 div5 div6

我怎麼能重新排序列得到這樣的SM-視：

div1 div3 div5 
div2 div4 div6

換句話說 - 每一個偶數列都必須下移，每一個奇數列都必須保持不變。可能嗎？

來源

2014-02-19 user3292126

簡單介紹了一套新的列：

<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。

來源

2014-02-19 09:13:35

大。非常感謝！ – user3292126

@ user3292126不用擔心。請記住將此標記爲接受的答案，以便在有機會時結束問題。 :-) –

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

來源

2014-02-23 09:05:03 cvrebert

Bootstrap 6列響應

回答

相關問題