Wie handhabt Bootstrap 4 die Spaltenreihenfolge über verschiedene Bildschirmgrößen hinweg?

Spaltenreihenfolge in Bootstrap4

Für flexible Anordnungen von Spalten über verschiedene Bildschirmgrößen hinweg bietet Bootstrap eine Reihe von Optionen.

Responsive Ordering in Bootstrap 4.0:

Bootstrap 4 beseitigt das Verwendung von „xs-“-Präfixen für seine responsiven Ordnungsklassen. Stattdessen geben die Modifikatoren „Push-“ und „Pull-“ das Ansichtsfenster und die Anzahl der Einheiten an, um die die Spalte verschoben werden soll. Um beispielsweise die gewünschte 1-3-2-Reihenfolge auf Mobilgeräten zu erreichen:

<div>
<p><strong>Responsive Ordering in Bootstrap 4.1 und höher</strong>:</p>
<p>Bootstrap 4.1 führt Flexbox ein, Vereinfachung der Spaltenreihenfolge. Die Auftragsklassen reichen von „Order-1“ bis „Order-12“. Spalten können responsiv bestellt werden, z. B. „order-md-12 order-2“ (letzter auf MD, zweiter auf XS):</p>
<pre class="brush:php;toolbar:false"><div>
<p><strong>Alternative Bestellmethoden</strong>:</p> <p>Zusätzlich zu den responsiven Bestellklassen bieten die Flexbox-Routing-Dienstprogramme eine weitere an Ansatz:</p>
<pre class="brush:php;toolbar:false"><div>
<p><strong>Zusätzliche Hinweise</strong>:</p>
<ul>
<li>Spaltenreihenfolge erfolgt relativ zur übergeordneten Zeile.</li>
<li>Responsive Klassen ermöglichen eine detaillierte Steuerung Überordnung, was komplexe Anordnungen über mehrere Bildschirmgrößen hinweg ermöglicht.</li>
<li>Bootstrap 4.1 und höher nicht mehr Unterstützen Sie die Push/Pull-Klassen, die in Versionen vor 4.0 verwendet werden.</li>
</ul>
</div>