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

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.