Complex column system with bootstrap 3.0

Question

I would like to do this grid system for my project (see photo).

But I'm not sure it's possible, without duplicate the desktop view and just displaying the good one depending the platform.

I prepared a clean fiddle to do some tries 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>

(For the tablet, I can inverse #2 & #3, it'll not a big deal, but i'm really stucked with desktop)

---

EDIT :

I've tried with col-x-pull-x & col-x-push-x, with col-x-offset-x, but it's not working

---

PS :

I'm searching a solution that avoid to duplicate to many code & possibly without a JS library. It would be the best, otherwise, I'll use different view for the desktop ( and use the hide-by-platform bootstrap functionality )

Answer 1

I think the best way to tackle the problem would be to nest your sections within two divs:

<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