Bootstrap布局设计

Question

我试着用下面的方法设置一个列布局。在"md“和更大的设备上，我有2列md-8和md-4。然而，在较小的设备上，我实际上希望在md-8列中显示1/2的内容，然后是md-4列的一半，然后是md-8列的其余部分……希望附件中的图片能有所帮助。

​

​

因此，在移动设备上，我想看到A、B、C、D按此顺序堆叠在一起。我的问题是A和B的高度是可变的，无论我怎么尝试，我最终都会在A&C或B& D之间留下空间的间隙。你觉得我的布局应该是什么？

Answer 1

检查这个解决方案，如果我理解得很好，你想垂直分成两半，不是吗？

<div class="row">
  <div class="col-md-8 col-sm-12">A1</div>
  <div class="col-md-4 col-sm-12">B1</div>
  <div class="col-md-8 col-sm-12">A2</div>
  <div class="col-md-4 col-sm-12">B2</div>
  <div class="col-md-8">C</div>
  <div class="col-md-4">D</div>
</div>

已编辑，警告。