ブートストラップを備えた複合カラムシステム3.0

Question

私のプロジェクトでこのグリッドシステムを使用したいと思います（写真参照）。

しかし、デスクトップの表示を重複せずに、プラットフォームに応じて適切なものを表示するだけでは、可能性はわかりません。

は、私はそれは大したことではないよ、いくつかの試みが

<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> 

here（タブレットのために、私は＃2 &＃3を反転することができます行うにはきれいなフィドルを用意しますが、私は本当にstuckedですデスクトップ）

---

EDIT：

私はcol-x-offset-xと、col-x-pull-x & col-x-push-xで試してみたが、それはPS

---

を働いていない：

私はせずに、おそらく多くのコード&に複製しないよう解決策を探していますJSライブラリそれ以外の場合は、デスクトップ用の別のビューを使用します（プラットフォーム非対応のブートストラップ機能を使用します）

Answer 1

私は問題を解決する最も良い方法は、2つのセクション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