Twitter bootstrap 使引导列垂直而不是水平

我已将以下引导标记为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>

当浏览器尺寸更大时，我希望数据列在两列中，但仍按垂直顺序排列

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列？

我建议您使用flexbox而不是引导。这是一个非常强大的css网格系统。您可以在一行中显示3、4、5、6列。此外，您还可以轻松处理响应性问题

@OP只想使用

Bootstrap

：：我不在乎我用什么，只要它是css，你应该看看

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