Komplexes Säulensystem mit Bootstrap 3.0

Question

Ich möchte dieses Gittersystem für mein Projekt machen (siehe Foto).

Aber ich bin mir nicht sicher, dass es möglich ist, ohne die Desktop-Ansicht zu duplizieren und nur die gute je nach Plattform anzuzeigen.

bereitete ich eine saubere Geige einige Versuche 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> 

(Für die Tablette zu tun, kann ich mit # 2 & # 3, es wird keine große Sache, aber ich bin wirklich stucked inverse Desktop)

---

EDIT:

Ich habe versucht, mit col-x-pull-x & col-x-push-x, mit col-x-offset-x, aber es ist nicht

Arbeits

---

PS:

ich eine Lösung bin auf der Suche, die & möglicherweise zu viele Code zu duplizieren vermeiden, ohne eine JS-Bibliothek. Es wäre das Beste, ansonsten verwende ich eine andere Ansicht für den Desktop (und verwende die Boot-Trap-Funktionalität)

Answer 1

Ich denke, der beste Weg, um das Problem zu lösen wäre, Ihre Abschnitte innerhalb von zwei zu verschachteln 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