it-swarm.com.de

Bootstrap 4, wie wird die Reihenfolge der Spalten umgekehrt?

Ich habe dieses einfache Szenario:

<div class="row">
    <div class="col-md-12 col-lg-6 col-xl-7">A</div>
    <div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>

im Grunde wenn md

A
B

Ich hätte es gern, wenn md

B
A

Ich habe viele im Web gefundene Varianten ausprobiert, wie flex-first und whatnot .. es scheint nicht zu funktionieren

Irgendwelche Ideen? 

9
Patrioticcow

Wenn Sie die Reihenfolge für md und größere Größen ändern möchten, können Sie order-md- verwenden. Dies wird von bootstrap bereitgestellt. Wenn Sie die Reihenfolge nur bei md ändern möchten, müssen Sie die normale Reihenfolge für eine größere Größe definieren. Fiddle

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-12 order-md-2">A</div>
  <div class="col-md-12 order-md-1">B</div>
</div>

10
Nenad Vracar

Es ist auch möglich, die Helper-Klassen flex- zu verwenden, um dieses Problem zu lösen. __ Mit dieser Lösung können Sie die Reihenfolge umkehren, ohne dass die Reihenfolge für die Spalten zählt.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row flex-column-reverse flex-lg-row">
  <div class="col-md-12 col-lg-6 col-xl-7">A</div>
  <div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>

Der flex-direction ist jetzt standardmäßig (md) umgekehrt und wird am Haltepunkt lg überschrieben.

9
Tim Vermaelen

Die einfachste Lösung wird sein:

.row{
    flex-direction: row-reverse;
}
2
Thorben Schmitt