Ordnen Sie Spalten über Bootstrap4

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 .

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):

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+

ACB ABC

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

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>

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.

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.

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