bootstrap 3.0 的复杂柱系统

Question

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

但我不确定是否可行，无需复制桌面视图，只根据平台显示好的视图。

我准备了一个干净的fiddle来做一些尝试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 和#3，这没什么大不了的，但我真的被桌面卡住了）

编辑 :

我试过 col-x-pull-x 和 col-x-push-x，col-x-offset-x，但没用

PS :

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

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

bootstrap 3.0 的复杂柱系统

Complex column system with bootstrap 3.0

frontend

grid-layout

twitter-bootstrap

twitter-bootstrap-3