Bootstrap优先垂直堆叠

Question

我想问一下，如果不使用Javascript或JQuery，是否可以在Bootstrap上进行这种列堆叠。

This One 而不是This。

我用过

  

COL-MD-6

此时为我的列设置样式，但是我无法弄清楚如何优先处理堆叠以填充垂直空间，直到它到达父级＆lt; div＆gt;的结尾（高度）。然后填充相邻的水平空间，依此类推。

我在Google的任何地方都找不到任何相关主题。所以，我来到这里看看它是否真的可能或不是。

感谢。

Answer 1

是的，这是可能的。但是你需要两个包装器。 1 ~ 4和5的{​​{1}}秒之一。

jQuery仅用于演示视口改变

6

$(document).ready(function() {
  $('button').click(function() {
    $('.wrapper').toggleClass('v2')
  });
});

div div div {
  border: 1px solid #ddd;
  text-align: center;
  font-weight: bold;
  float: left;
  padding: 20px 20px;
}
div {
  box-sizing: border-box;
}
.wrapper {
  width: 100px;
  height: 250px;
}
.w-1,
.w-2 {
  width: 50%;
  float: left;
}
.v2 .w-1,
.v2 .w-2 {
  width: 100%;
}