Arbeit vertikale Neuanordnung der Zellen in Grid-System Stellen reagierend

Question

Ich habe dieses Layout bekam:

+--X---------------+--Y---+ 
|     | A | 
|     + ---- + 
|     | B | 
+------------------+------+ 

mit X = #main-col und Y = #plugin-col und A und B sein .plugin:

<div class="row"> 
    <div class="col-md-9" id="main-col">…</div> 
    <div class="col-md-3" id="plugin-col"> 
    <div class="plugin">A</div> 
    <div class="plugin">B</div> 
    </div> 
</div> 

Jetzt bin ich mit dieses JavaScript:

$('#main-col').toggleClass('col-md-9 col-md-12'); 
$('#plugin-col').toggleClass('col-md-3 col-md-12 row'); 
$('#plugin-col .plugin').toggleClass('col-md-3'); 

dieses Layout zu erreichen:

+--X----------------------+ 
|       | 
|       | 
|       | 
+------+------+-----------+ 
| A | B | 
+------+------+ 

Gibt es einen Weg, um die horizontale < zu erreichen -> vertikale Umordnung der A & B-Zellen automatisch und in Reaktion darauf, wenn das Browserfenster zwischen einer bestimmten Breite schrumpft?

Answer 1

Es ist nicht notwendig, dass JS einfach einen weiteren row hinzufügt und Bootstrap-Cols verwendet, um das gewünschte Ergebnis zu erhalten. DEMO

<div class="row"> 
    <div class="col-md-9" id="main-col">…</div> 
    <div class="col-md-3" id="plugin-col"> 
    <div class="row"> 
     <div class="plugin col-md-12 col-lg-12 col-xs-6">A</div> 
     <div class="plugin col-md-12 col-lg-12 col-xs-6">B</div> 
    </div> 
    </div> 
</div>