使自舉列垂直取向的而不是水平

Question

我有以下引導標記的HTML

<div class="container"> 
    <div class="row justify-content-md-center"> 
    <div class="col col-md-6"> 
     <div class="col col-xs-12"> 
     <div>a</div> 
     <div>b</div> 
     <div>c</div> 
     </div> 
     <div class="col col-xs-12"> 
     <div>d</div> 
     <div>e</div> 
     <div>f</div> 
     </div> 
    </div> 
    <div class="col col-md-6"> 
     <div class="col col-xs-12"> 
     <div>g</div> 
     <div>h</div> 
     <div>i</div> 
     </div> 
     <div class="col col-xs-12"> 
     <div>j</div> 
     <div>k</div> 
     <div>l</div> 
     </div> 
    </div> 
    </div> 
</div> 

https://www.bootply.com/blyGjCAkjr

我希望我的數據被垂直列出按照本例中，以使第二元件是第一和第二等

a 
b 
c 
d 
e 
f 
g 
h 
i 
j 
k 
l 

當瀏覽器尺寸爲寬我想，但還是垂直佈局兩個欄列出的數據下的第3下order

a g 
b h 
c i 
d j 
e k 
f l 

我到目前爲止已經工作，但我不確定這是實現它的最佳方法。另外，我想進一步擴展該所以它可以切換到3列

a e i 
b f j 
c g k 
d h l 

和4列作爲瀏覽器的尺寸甚至更寬，同時還保持垂直取向的元件。

a d g j 
b e h k 
c f i l 

很明顯，可以在這種方式之間切換1和2列，因爲我已經做到了。是否也可以只使用引導程序切換到3列和4列？

Answer 1

我會建議你使用flexbox而不是bootstrap。它是一個非常強大的CSS網格系統。您可以在一行中顯示3,4,5,6列。您也可以輕鬆處理響應。 Here is a link to an article.