如何切換堆疊到不同列的兩個Bootstrap div？

如果這是一個愚蠢的問題，我很抱歉！對於Bootstrap我還是比較新的。如何切換堆疊到不同列的兩個Bootstrap div？

我有4個divs。在md和lg屏幕上，我要這樣做：

[A] [B] [C] [D]

在sm屏幕上，我想重新排列爲兩列。我的代碼做到這一點：

[A] [B] 
[C] [D]

，但我真的想它做的是這樣的：

[A] [C] 
[B] [D]

然後，XS屏幕我希望它這樣做：

[A] 
[B] 
[C] 
[D]

我該如何用Bootstrap來實現？我知道有些課程需要推動和拉動，但我還沒有弄清楚它們是如何工作的 - 當我試圖推拉中間格時，它們最終消失。我將衷心感謝您的幫助！

順便說一句，這裏是我現在已經得到了代碼：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
     <div class="container centered"> 
 
      <div class="col-md-3 col-sm-6"> 
 
       A 
 
      </div> 
 
      <div class="col-md-3 col-sm-6"> 
 
       B 
 
      </div> 
 
      <div class="col-md-3 col-sm-6"> 
 
       C 
 
      </div> 
 
      <div class="col-md-3 col-sm-6"> 
 
       D 
 
      </div> 
 
     </div>

來源

2015-09-05 Adrienne W

您可以使用.col-md-push-和.col-md-pull-更改列的順序。

http://getbootstrap.com/css/#grid-column-ordering

來源

2015-09-05 22:50:34

似乎這不是爲我工作 - 當我推B和拉C，它結束了一層將列重疊在一起。 –

推是在CSS 左：X％和拉是在CSS 右：X％。我認爲，divs消失了，因爲它們是太遠了或者它們是在相同的地方。

我認爲，在這種情況下，你不能使用拉和推。

如果你想要它與完整的字母表，你必須使用位置絕對 sm爲每個列。

對於A-M留在left: 0左側。對於N - Z留在right: 0右側。您可以將更改爲另一個值。而且你必須給每個列表一個top。否則它不起作用。

CSS

@media screen and (min-width: 768px) and (max-width: 992px) { 
    .alpha > .row > div { 
     position: absolute; 
    } 
    .left-sm { 
     left: 0; 
    } 
    .right-sm { 
     right: 0; 
    } 
    /* left side */ 
    .alpha > .row:nth-of-type(1) > div:nth-of-type(1) { 
     top: 0px; /* A */ 
    } 
    .alpha > .row:nth-of-type(1) > div:nth-of-type(2) { 
     top: 50px; /* B */ 
    } 
    .alpha > .row:nth-of-type(1) > div:nth-of-type(3) { 
     top: 100px; /* ... */ 
    } 
    .alpha > .row:nth-of-type(1) > div:nth-of-type(4) { 
     top: 150px; 
    } 
    .alpha > .row:nth-of-type(2) > div:nth-of-type(1) { 
     top: 200px; 
    } 
    .alpha > .row:nth-of-type(2) > div:nth-of-type(2) { 
     top: 250px; 
    } 
    .alpha > .row:nth-of-type(2) > div:nth-of-type(3) { 
     top: 300px; 
    } 
    .alpha > .row:nth-of-type(2) > div:nth-of-type(4) { 
     top: 350px; 
    } 
    .alpha > .row:nth-of-type(3) > div:nth-of-type(1) { 
     top: 400px; 
    } 
    .alpha > .row:nth-of-type(3) > div:nth-of-type(2) { 
     top: 450px; 
    } 
    .alpha > .row:nth-of-type(3) > div:nth-of-type(3) { 
     top: 500px; 
    } 
    .alpha > .row:nth-of-type(3) > div:nth-of-type(4) { 
     top: 550px; 
    } 
    .alpha > .row:nth-of-type(4) > div:nth-of-type(1) { 
     top: 600px; 
    } 
    /* right side */ 
    .alpha > .row:nth-of-type(4) > div:nth-of-type(2) { 
     top: 0px; /* N */ 
    } 
    .alpha > .row:nth-of-type(4) > div:nth-of-type(3) { 
     top: 50px; /* O */ 
    } 
    .alpha > .row:nth-of-type(4) > div:nth-of-type(4) { 
     top: 100px; /* ... */ 
    } 
    .alpha > .row:nth-of-type(5) > div:nth-of-type(1) { 
     top: 150px; 
    } 
    .alpha > .row:nth-of-type(5) > div:nth-of-type(2) { 
     top: 200px; 
    } 
    .alpha > .row:nth-of-type(5) > div:nth-of-type(3) { 
     top: 250px; 
    } 
    .alpha > .row:nth-of-type(5) > div:nth-of-type(4) { 
     top: 300px; 
    } 
    .alpha > .row:nth-of-type(6) > div:nth-of-type(1) { 
     top: 350px; 
    } 
    .alpha > .row:nth-of-type(6) > div:nth-of-type(2) { 
     top: 400px; 
    } 
    .alpha > .row:nth-of-type(6) > div:nth-of-type(3) { 
     top: 450px; 
    } 
    .alpha > .row:nth-of-type(6) > div:nth-of-type(4) { 
     top: 500px; 
    } 
    .alpha > .row:nth-of-type(7) > div:nth-of-type(1) { 
     top: 550px; 
    } 
    .alpha > .row:nth-of-type(7) > div:nth-of-type(2) { 
     top: 600px; 
    } 
}

HTML

<div class="container alpha"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">A</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">B</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">C</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">D</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">E</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">F</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">G</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">H</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">I</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">J</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">K</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">L</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">M</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">N</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">O</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">P</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">Q</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">R</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">S</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">T</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">U</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">V</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">W</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">X</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">Y</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">Z</div> 
     </div> 
    </div> 
</div>

Demo

來源

2015-09-06 01:48:33 Sun

This Works！我唯一擔心的是每個div中都有相當數量的內容（這是50個州的一組鏈接按鈕，這就是爲什麼順序很重要 - 按字母順序排列），我不想讓Google /我的搜索引擎優化通過隱藏訪問者的大量內容。 –

我已經更新了我的答案。如果你想用完整的字母表來完成，那是另一種情況！請更新您的問題，以便人們可以知道它是關於完整的字母表。非常感謝你！ – Sun

如何切換堆疊到不同列的兩個Bootstrap div？

回答

相關問題