具有引导程序3.0的复杂列系统

Question

我想为我的项目做这个网格系统（见图）。

但我不确定是否可能，没有重复的桌面视图，只是根据平台显示好的。

我准备了一个干净的小提琴来做一些尝试here

<section class="col-xs-12 col-sm-6">#1</section>
<section class="col-xs-12 col-sm-6">#2</section>
<section class="col-xs-12 col-sm-6">#3</section>
<section class="col-xs-12 col-sm-6">#4</section>

（对于平板电脑，我可以倒转＃2＆amp;＃3，这不是什么大问题，但我真的很喜欢桌面）

编辑：

我试过col-x-pull-x＆amp; col-x-push-x，col-x-offset-x，但无效

PS ：

我正在寻找一种避免复制到许多代码的解决方案。可能没有JS库。这将是最好的，否则，我将使用不同的桌面视图（并使用隐藏平台引导程序功能）

Answer 1

我认为解决问题的最佳方法是将您的部分嵌套在两个div中：

<div class="col-lg-12"> 
  <div class="col-lg-3">
    <section class="col-xs-12 col-sm-6 col-lg-12">#1</section>
    <section class="col-xs-12 col-sm-6 col-lg-12">#2</section>
    <section class="col-xs-12 col-sm-6 col-lg-12">#3</section>
  </div>
  <div class="col-lg-9">
    <section class="col-xs-12 col-sm-6">#4</section>
  </div>
</div>

Fiddle