Bootstrap rechte Spalte oben auf mobilen Ansicht

Question

Ich habe eine Bootstrap Seite wie folgt aus:

<div class="row"> 
    <div class="col-md-6"> 
     A 
    </div> 
    <div class="col-md-6"> 
     B 
    </div> 
</div> 

Sieht aus wie:

----- 
|A|B| 
----- 

Also, wenn ich auf einem mobilen Gerät es betrachtet die Spalte A, ist oben, aber ich will das B oben. Ist das möglich? Ich versuchte es mit Push und Pull, aber es hat nicht funktioniert.

Answer 1

Verwenden Sie hierzu Column ordering. Siehe auch this article on Column Ordering

col-md-push-6 wird „Push“ der Spalte auf der rechten Seite 6 und col-md-pull-6 wird „ziehen“ die Spalte auf der linken Seite auf „MD“ oder größere Ansicht-Ports. Auf kleineren View-Ports sind die Spalten wieder in normaler Reihenfolge.

Ich denke, was Menschen wegwirft, ist, dass Sie B über A in Ihrem HTML setzen müssen. Es kann eine andere Art und Weise, dies zu tun, in der A über B im HTML gehen kann, aber ich bin nicht sicher, wie es zu tun ...

DEMO

<div class="row"> 
    <div class="col-md-6 col-md-push-6">B</div> 
    <div class="col-md-6 col-md-pull-6">A</div> 
</div> 

view-port> = md

|A|B| 

view-Port <

md

|B| 
|A| 

Answer 2

Es ist erwähnenswert, dass, wenn Sie colum verwenden ns, die nicht gleich 6 sind, dann entspricht der Push-Betrag nicht der anfänglichen Spaltengröße.

Wenn Sie 2 Spalten (A & B) und wünschen für die Spalte A kleiner und nach rechts auf „sm“ oder größer Ansichtsfenstern, aber auf einem Handy (xs) Ansichtsfenster, würden Sie die folgende verwenden:

<div class="row"> 
    <div class="col-sm-4 col-sm-push-8">A</div> 
    <div class="col-sm-8 col-sm-pull-4">B</div> 
</div> 

Andernfalls erscheint die Ausrichtung der Spalten aus.

Answer 3

Flexbox Direction

Für Bootstrap 4, wenden Sie eine der folgenden auf Ihre .row div:

.flex-row-reverse 

Für ansprechende Einstellungen:

.flex-sm-row-reverse 
.flex-md-row-reverse 
.flex-lg-row-reverse 
.flex-xl-row-reverse 

Answer 4

Der Code unten Arbeit für mich

.row { 
    display: flex; 
    flex-direction: column-reverse; 
} 

Answer 5

In Bootstrap V4 (freigegeben am 18. Januar 2018) Sie können Reordering-Klassen verwenden. Info hier unter Neuordnung Tab.

https://getbootstrap.com/docs/4.0/layout/grid/

Answer 6

I verwendet:

.row { 
    display: flex; 
    flex-direction: row-reverse; 
}