引導從3列到2同時保留行

Question

我有一個佈局3列和2行，像這樣的桌面：

<div class="row"> 
    <div class="col-md-4"> 
    1. Lorem ipsum 
    </div> 
    <div class="col-md-4"> 
    2. dolor sit<br>amet 
    </div> 
    <div class="col-md-4"> 
    3. consectetur 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-4"> 
    4. adipisicing<br>incididunt 
    </div> 
    <div class="col-md-4"> 
    5. elit 
    </div> 
    <div class="col-md-4"> 
    6. sed reprehenderit 
    </div> 
</div> 

在移動設備上我要實現2列3行的佈局應該是這樣的：

<div class="row"> 
    <div class="col-xs-6"> 
    1. Lorem ipsum 
    </div> 
    <div class="col-xs-6"> 
    2. dolor sit<br>amet 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-6"> 
    3. consectetur 
    </div> 
    <div class="col-xs-6"> 
    4. adipisicing<br>incididunt 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-6"> 
    5. elit 
    </div> 
    <div class="col-xs-6"> 
    6. sed reprehenderit 
    </div> 
</div> 

所以我目前的解決方案是隻有一個包裝row並允許引導做是很自然的包裝，像這樣：

<div class="row"> 
    <div class="col-xs-6 col-md-4"> 
    1. Lorem ipsum 
    </div> 
    <div class="col-xs-6 col-md-4"> 
    2. dolor sit<br>amet 
    </div> 
    <div class="col-xs-6 col-md-4"> 
    3. consectetur 
    </div> 
    <div class="col-xs-6 col-md-4"> 
    4. adipisicing<br>incididunt 
    </div> 
    <div class="col-xs-6 col-md-4"> 
    5. elit 
    </div> 
    <div class="col-xs-6 col-md-4"> 
    6. sed reprehenderit 
    </div> 
</div> 

工作正常，除非列不完全相同（他們不是）。在這種情況下，佈局打破了浮動元素被抓住的地方。

這裏的問題的Plunker例如：https://embed.plnkr.co/eUJCUiGl5VrnTc5Z1c72/

什麼是在這種情況下該如何解決？

Answer 1

你很近，你有正確的想法使用單個包裝<div class="row">元素。所有你需要的是clearfix元素，可見在某些斷點值(xs, sm, md, lg)：

<div class="row"> 
    <div class="col-md-4 col-xs-6"> 
     <div class="body"> 
      1. Multi<br>line<br>content 
     </div> 
    </div> 
    <div class="col-md-4 col-xs-6"> 
     <div class="body"> 
      2. Single line 
     </div> 
    </div> 
    <div class="clearfix visible-xs-block visible-sm-block"></div> 
    <div class="col-md-4 col-xs-6"> 
     <div class="body"> 
      3. Double<br>line 
     </div> 
    </div> 
    <div class="clearfix visible-md-block visible-lg-block"></div> 
    <div class="col-md-4 col-xs-6"> 
     <div class="body"> 
      4. More content 
     </div> 
    </div> 
    <div class="clearfix visible-xs-block visible-sm-block"></div> 
    <div class="col-md-4 col-xs-6"> 
     <div class="body"> 
      5. Body 
     </div> 
    </div> 
    <div class="col-md-4 col-xs-6"> 
     <div class="body"> 
      6. Text<br>with<br>many<br>many<br>lines 
     </div> 
    </div> 
    <div class="clearfix"></div> 
</div> 

這樣做是在給定的時間間隔強制新行 - xs/sm每隔<div>和md/lg每三<div>（可以很容易地使用編程方式插入一個循環）。通過指定visible-*-block類，它只會在某個斷點渲染<div>，這意味着您不會意外空間。

你可以找到更多的文檔Here和一個活生生的例子循環的Here

例如產生這種（PHP，但可以用任何語言來完成）：

for($i = 1; $i < 13; $i++){ 
    echo '<div>'.$i.' Words... Blah... Whatever.</div>'; 
    if($i % 6 == 0){ 
    echo '<div class="clearfix"></div>'; 
    } else if($i % 3 == 0){ 
    echo '<div class="clearfix visible-md-block visible-lg-block"></div>'; 
    } else if($i % 2 == 0){ 
    echo '<div class="clearfix visible-xs-block visible-sm-block"> 
    } 
} 

那麼這將完成是每第2次迭代打印clearfix爲xs/sm，每第3次迭代打印clearfix爲md/lg和每隔6次迭代打印clearix兩者。