ohne Position absolute

Question

Ich habe drei Blöcke wie folgt aus:

<div class="col-sm-6 col-xs-12 left-top"></div>    
<div class="col-sm-6 col-xs-12 right-top"> 
    <div class="col-sm-6 col-xs-12 left-bottom"></div>    
    <div class="col-xs-6 right-bottom"> 

aber auf einem kleineren Bildschirm Größe möchte ich eigentlich diese:

<div class="col-sm-6 col-xs-12 left-top -> Top"></div>    
<div class="col-xs-6 right-top -> Middle"> 
    <div class="col-sm-6 col-xs-12 left-bottom -> Bottom"></div> 
    <div class="col-xs-6 right-bottom -> Middle"> 

So sind die vier Blöcke platziert unter einander aber in einer anderen Reihenfolge, aber ich möchte die absolute Position nicht dafür verwenden.

Wie kann ich das tun?

Answer 1

können Sie Bootstrap 3s verwenden Pull und Push Klassen Ihren Weg durch diese Geige. Vollständige Erklärung finden Sie over here.

Aber für Ihren Code Sie Folgendes tun könnte:

<div class="col-sm-6 col-xs-12 left-top"></div> 
<div class="col-xs-6 right-top"></div> 
<div class="col-xs-6 col-sm-push-6 right-bottom"></div> 
<div class="col-sm-6 col-xs-12 col-sm-pull-6 left-bottom></div> 

Dadurch wird die divs Orte zu ändern, sobald es den SM-Punkt trifft. Die Grundregel hier ist, die divs in Ihrem HTML zu ordnen, wie Sie wollen, dass sie in der allerletzten Ansicht sind, die in diesem Fall bewegliche Ansicht ist, und herum mit col-sm-push und col-sm-pull herumlaufen, um sie an einem anderen Ort zu erhalten, wenn Sie bin immer noch auf der Desktop-Ansicht.