Ich habe 3 Spalten, die ich auf Desktop und Mobile auf unterschiedliche Weise bestellen möchte. Derzeit sieht mein Gürtel so aus:
<div class="row">
<div class="col-xs-3 col-md-6">
1
</div>
<div class="col-xs-3 col-md-6">
2
</div>
<div class="col-xs-6 col-md-12">
3
</div>
</div>
In der mobilen Ansicht möchte ich die folgende Ausgabe haben:
1-3-2
Leider verstehe ich nicht, wie ich das mit den Klassen .col-md-push-*
und .col-md-pull-*
in Bootstrap 4 lösen kann .
css
bootstrap-4
grid
Cray
quelle
quelle
Antworten:
2018 - Wiederholung dieser Frage mit dem neuesten Bootstrap 4.
Die ansprechenden Ordnungs Klassen sind jetzt
order-first
,order-last
undorder-0
-order-12
Die Bootstrap 4 Push Pull Klassen sind jetzt(Dies funktioniert nur vor der Beta-push-{viewport}-{units}
undpull-{viewport}-{units}
und dasxs-
Infix wurde entfernt. Um das gewünschte 1-3-2-Layout auf mobile / xs zu erhalten, gehen Sie wie folgt vor: Bootstrap 4 Push-Pull-DemoVersion4.0)Bootstrap 4.1+
Da Bootstrap 4 eine Flexbox ist, kann die Reihenfolge der Spalten leicht geändert werden. Die cols können bestellt werden ,
order-1
umorder-12
, in Reaktion darauf, wieorder-md-12 order-2
(zuletzt ammd
2. onxs
) relativ zu dem Elternteil.row
.<div class="container"> <div class="row"> <div class="col-3 col-md-6"> <div class="card card-body">1</div> </div> <div class="col-6 col-md-12 order-2 order-md-12"> <div class="card card-body">3</div> </div> <div class="col-3 col-md-6 order-3"> <div class="card card-body">2</div> </div> </div> </div>
Demo: Reihenfolge mit
order-*
Klassen ändernDesktop (größere Bildschirme):
Mobil (kleinere Bildschirme):
Es ist auch möglich, die Spaltenreihenfolge mit den Flexbox-Richtungs-Utils zu ändern ...
<div class="container"> <div class="row flex-column-reverse flex-md-row"> <div class="col-md-8"> 2 </div> <div class="col-md-4"> 1st on mobile </div> </div> </div>
Demo: Bootstrap 4.1 Reihenfolge mit Flexbox-Richtung ändern
Demo der älteren Version Demo - Alpha 6
Demo - Beta (3)
Weitere Demo zum Bestellen von Bootstrap 4.1+
Verwandte:
Spaltenreihenfolge in Bootstrap 4 mit Push / Pull und col-md-12
Bootstrap 4 ändern die Reihenfolge der Spalten
ACB ABC
quelle
order-*
Klassen können nicht mehrmals verwendet werden. So funktioniert das. Aus den Dokumenten .. "Diese Klassen reagieren, sodass Sie die Reihenfolge nach Haltepunkt festlegen können (z. B. .order-1.order-md-2). Beinhaltet Unterstützung für 1 bis 12 in allen fünf Rasterebenen."order-2 order-md-12
Klassen können also nicht zusammen verwendet werden?order-md-1 order-sm-2
undorder-1 order-sm-2
nicht arbeiten. Ich mache es manuellDies kann auch mit der CSS-Eigenschaft "Order" und einer Medienabfrage erreicht werden.
Etwas wie das:
@media only screen and (max-width: 768px) { #first { order: 2; } #second { order: 4; } #third { order: 1; } #fourth { order: 3; } }
CodePen-Link: https://codepen.io/preston206/pen/EwrXqm
quelle
Auch das wird funktionieren:
<div class="container"> <div class="row"> <div class="col-4 col-sm-4 col-md-6 order-1"> 1 </div> <div class="col-4 col-sm-4 col-md-6 order-3"> 2 </div> <div class="col-4 col-sm-4 col-md-12 order-2"> 3 </div> </div> </div>
quelle
Ich verwende Bootstrap 3, daher weiß ich nicht, ob es einen einfacheren Weg gibt, Bootstrap 4 zu erstellen, aber dieses CSS sollte für Sie funktionieren:
.pull-right-xs { float: right; } @media (min-width: 768px) { .pull-right-xs { float: left; } }
... und Klasse zur zweiten Spalte hinzufügen:
<div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md-6 pull-right-xs"> 2 </div> <div class="col-xs-6 col-md-12"> 3 </div> </div>
BEARBEITEN:
Ohh ... es sieht so aus, als wäre das, was ich oben geschrieben habe, genau ein. pull-xs-right- Klasse in Bootstrap 4: X Fügen Sie sie einfach zur zweiten Spalte hinzu, und sie sollte perfekt funktionieren.
quelle
Da die Spaltenreihenfolge in Bootstrap 4 Beta nicht funktioniert, wie im Code in der überarbeiteten Antwort oben beschrieben, müssen Sie Folgendes verwenden (wie in der Demo zu Codeply 4 Flexbox Order angegeben - Alpha / Beta-Links, die in bereitgestellt wurden die Antwort).
<div class="container"> <div class="row"> <div class="col-3 col-md-6"> <div class="card card-block">1</div> </div> <div class="col-6 col-md-12 flex-md-last"> <div class="card card-block">3</div> </div> <div class="col-3 col-md-6 "> <div class="card card-block">2</div> </div> </div>
Beachten Sie jedoch, dass die "Flexbox-Bestell-Demo - Beta" zu einer Alpha-Codebasis wechselt und das Ändern der Codebasis in Beta (und deren Ausführung) dazu führt, dass die Divs in einer einzelnen Spalte falsch angezeigt werden - dies scheint jedoch ein Codeply-Problem seit dem Schneiden und zu sein Das Einfügen des Codes aus dem Codeply funktioniert wie beschrieben.
quelle
Sie können zwei verschiedene Container erstellen, einen mit mobiler Bestellung und auf dem Desktop-Bildschirm ausblenden, einen anderen mit Desktop-Bestellung und auf dem mobilen Bildschirm ausblenden
quelle