Ordnen Sie Spalten über Bootstrap4

80

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 .

Cray
quelle
Es ist in den Dokumenten beschrieben: v4-alpha.getbootstrap.com/layout/grid/#example-column-ordering
Cray
col-xx-push- und col-xx-pull- sind die gleichen wie Bootstrap 3. Möchten Sie das Raster für 'md' und über 1-2, andere Zeile 3 und für 'sm' und unter 1-3-2 ?
tmg

Antworten:

139

2018 - Wiederholung dieser Frage mit dem neuesten Bootstrap 4.

Die ansprechenden Ordnungs Klassen sind jetzt order-first, order-lastund order-0-order-12

Die Bootstrap 4 Push Pull Klassen sind jetzt push-{viewport}-{units}und pull-{viewport}-{units}und das xs-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-Demo (Dies funktioniert nur vor der Beta- Version 4.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-1um order-12, in Reaktion darauf, wie order-md-12 order-2(zuletzt am md2. on xs) 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 ändern

Desktop (größere Bildschirme): Geben Sie hier die Bildbeschreibung ein

Mobil (kleinere Bildschirme): Geben Sie hier die Bildbeschreibung ein

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

Zim
quelle
@Alireza - Die 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."
Zim
@Zim order-2 order-md-12Klassen können also nicht zusammen verwendet werden?
Alireza
Nein, sie können zusammen verwendet werden.
Zim
@Zim order-md-1 order-sm-2und order-1 order-sm-2nicht arbeiten. Ich mache es manuell
Alireza
Sie funktionieren, wenn Sie die oben angegebene Version codeply.com/go/23VFxwWTdP verwenden . Außerdem weiß ich nicht, was Sie erreichen möchten, was sich höchstwahrscheinlich von der ursprünglichen Frage unterscheidet, für die meine Antwort gilt. Denken Sie daran, dass Spalten in derselben Zeile relativ zueinander sind.
Zim
21

Dies 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

bprdev
quelle
Ich konnte keine Bestellung mit Bootstrap-Klassen nur für Handys bekommen. Das hat funktioniert, danke
Xavier Ojeda Aguilar
3

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>
Nikil Sugandh
quelle
2

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.

Marek Kus
quelle
Ops ... ich habe einen Fehler im Style-Code gemacht: X Jetzt ausprobieren. Und wenn es nicht funktionieren würde, versuchen Sie es mit! Wichtig, um zu schweben.
Marek Kus
1
Es ist das gleiche. Ich habe mit der .pull-xs-right-Klasse von Bootsrap 4 gearbeitet.
Cray
-1

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.

user3893613
quelle
-4

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

MarBer
quelle
2
Es würde funktionieren, aber es ist unnötige Datenvervielfältigung. Sie können dies mit der Manipulation des Float-Parameters tun (und auch auf andere Weise).
Marek Kus