在Bootstrap Grid中按列排序內容

Question

我有一個簡單的自舉網格設置爲兩列（內容左側和右側），將所有內容細分爲移動設備和平板電腦中的一列。

<div class="row"> 
    <div class="col-md-6">Left Column</div> 
    <div class="col-md-6">Right Column</div> 
</div> 

問題是我試圖在兩列分解爲一列後，在每列內部排列內容。換句話說：我有兩個段落在兩列之間進行劃分，當頁面位於桌面上時，段落的第一部分位於第一列中，而另一部分與第二列中的水平對齊，所以當網格中斷時，第二部分將落在第一部分的所有其他部分之下，而不是第一部分。

<div class="row"> 
    <div class="col-md-6"> 
     <p>PARAGRAPH 1 PART 1</p> 
     <p>other stuff</p> 
     <p>other stuff</p> 
     <p>other stuff</p> 
     <p>other stuff</p> 
    </div> 
    <div class="col-md-6"> 
     <p>PARAGRAPH 1 PART 2</p> 
     <p>other stuff</p> 
     <p>other stuff</p> 
     <p>other stuff</p> 
    </div> 
</div> 

因此，簡單地說，第1部分第2部分需要在第1部分第1部分下面，當只剩下一列時。

我已經研究過自舉推拉，在這種情況下不起作用。否則我無法找到任何關於這個特定問題的文檔。

Answer 1

的事情是，對於設備> = 940px，.col-md-x集x列當寬度低於，燒烤會垂直顯示，所以第二個COL-MD-6（兼職兩個）在第一個（第一部分）的底下，其所有內容，然後說了這些。

您可以使用：

<div class="row"> 
    <div class="col-md-6"> 
     <p>PARAGRAPH 1 PART 1</p> 
    </div> 
    <div class="col-md-6"> 
     <p>PARAGRAPH 1 PART 2</p> 
    </div> 
    <div class="col-md-6"> 
     <p>other stuff1</p> 
     <p>other stuff1</p> 
     <p>other stuff1</p> 
     <p>other stuff1</p> 
    </div> 
    <div class="col-md-6">   
     <p>other stuff2</p> 
     <p>other stuff2</p> 
     <p>other stuff2</p> 
    </div> 
</div> 

或相同的事情，但更有條理

<div class="row"> 
    <div class="col-md-6"> 
     <p>PARAGRAPH 1 PART 1</p> 
    </div> 
    <div class="col-md-6"> 
     <p>PARAGRAPH 1 PART 2</p> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-6"> 
     <p>other stuff1</p> 
     <p>other stuff1</p> 
     <p>other stuff1</p> 
     <p>other stuff1</p> 
    </div> 
    <div class="col-md-6">   
     <p>other stuff2</p> 
     <p>other stuff2</p> 
     <p>other stuff2</p> 
    </div> 
</div> 

但我真的建議你使用：CSS3 Multiple Columns

Answer 2

有幾種方法可以解決它。但是我建議使用更多的列，然後根據需要添加推拉類。下面的代碼。

<div class="row"> 
    <div class="col-md-6 col-xs-12"> 
     <p>PARAGRAPH 1 PART 1</p> 
    </div> 
    <div class="col-md-6 col-xs-12 col-xs-push-12"> 
     <p>other stuff</p> 
     <p>other stuff</p> 
     <p>other stuff</p> 
     <p>other stuff</p> 
    </div> 
    <div class="col-md-6 col-xs-12 col-xs-pull-12"> 
     <p>PARAGRAPH 1 PART 2</p> 
    </div> 
    <div class="col-md-6 col-xs-12"> 
     <p>other stuff</p> 
     <p>other stuff</p> 
     <p>other stuff</p> 
    </div> 
</div> 

注：我添加了額外的類（COL-XS-12在一些額外的地方，我認爲）這只是爲了多一點明確的。

Answer 3

您可以使用hidden-xs，hidden-sm和visible-xs，visible-sm來實現您想要的效果。

基本上，您在其他列添加hidden-xs和hidden-sm到PARAGRAPH 1 PART 2，然後在原始列中添加visible-xs和visible-sm。這就是我的意思是：

<div class="row"> 
    <div class="col-md-6"> 
     <p>PARAGRAPH 1 PART 1</p> 
     <p class="visible-xs visible-sm">PARAGRAPH 1 PART 2</p> 
     <p>other stuff</p> 
     <p>other stuff</p> 
     <p>other stuff</p> 
     <p>other stuff</p> 
    </div> 
    <div class="col-md-6"> 
     <p class="hidden-xs hidden-sm">PARAGRAPH 1 PART 2</p> 
     <p>other stuff</p> 
     <p>other stuff</p> 
     <p>other stuff</p> 
    </div> 
</div>