你尝试过嵌套列吗?你可以放置一个三列的单行,然后在这些列内嵌其他div。 这是一个Bootply。你可以看到在移动设备上列会堆叠。下面是代码,相对简单:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<div class="col-xs-12 col-top"></div>
<div class="col-xs-12 col-left"></div>
<div class="col-xs-12 col-left"></div>
<div class="col-xs-12 col-left"></div>
</div>
<div class="col-xs-12 col-md-4">
<div class="col-xs-12 col-top"></div>
<div class="col-xs-12 col-mid"></div>
<div class="col-xs-12 col-mid"></div>
<div class="col-xs-12 col-mid"></div>
</div>
<div class="col-xs-12 col-md-4">
<div class="col-xs-12 col-top"></div>
<div class="col-xs-12 col-right"></div>
<div class="col-xs-12 col-right"></div>
<div class="col-xs-12 col-right"></div>
</div>
</div>
</div>
为适应白色块,已进行更新。在大屏幕上,我使用CSS将空块变为白色,在移动设备上,这些块被隐藏。这里是更新的 Bootply,以下是代码。
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<div class="col-xs-12 col-top"></div>
<div class="col-xs-12 col-left"></div>
<div class="col-xs-12 col-mid visible-lg" id="white"></div>
<div class="col-xs-12 col-left"></div>
</div>
<div class="col-xs-12 col-md-4">
<div class="col-xs-12 col-top"></div>
<div class="col-xs-12 col-mid visible-lg" id="white"></div>
<div class="col-xs-12 col-mid"></div>
<div class="col-xs-12 col-mid visible-lg" id="white"></div>
</div>
<div class="col-xs-12 col-md-4">
<div class="col-xs-12 col-top"></div>
<div class="col-xs-12 col-topright"></div>
<div class="col-xs-12 col-bottomright"></div>
</div>
</div>
</div>