Um Spalten durch Bootstrap4

Ich habe 3 Spalten, die ich will, um in unterschiedlicher Weise auf desktop-und Mobilgeräten.
Derzeit ist meine Stichelei sieht so aus:

HTML:

<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 ich möchte die folgende Ausgabe:

1-3-2

Leider weiß ich nicht, wie dieses Problem zu lösen mit der .col-md-push-* und .col-md-pull-* Klassen in der Bootstrap-4.

Es ist beschrieben in den docs: v4-alpha.getbootstrap.com/layout/grid/#example-column-ordering
col-xx-push-und col-xx-ziehen - sind die gleichen wie bootstrap 3. Wollen Sie das raster für 'md' und oben 1-2 andere Zeile 3 und für die 'sm' und unten 1-3-2?

InformationsquelleAutor Cray | 2016-06-14

82

2018 - Wiederaufgreifen dieser Frage mit den neuesten Bootstrap-4.

Responsive Bestell-Klassen sind jetzt order-first, order-last und order-0 - order-12

Die Bootstrap-4 push ziehen Klassen sind jetzt push-{viewport}-{units} und pull-{viewport}-{units} und die xs- infix entfernt wurde. Um das gewünschte layout 1-3-2 auf mobile/xs wäre: Bootstrap-4 push-pull-demo (Das funktioniert nur vor 4.0 beta)

Bootstrap 4.1+

Da Bootstrap 4 ist flexbox, ist es einfach, die Reihenfolge der Spalten ändern. Die Spalten können bestellt werden bei: order-1 zu order-12, dementsprechend wie order-md-12 order-2 (zuletzt am md, 2. auf xs) relativ zum übergeordneten .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 ändern mit order-* Klassen

Desktop (größere Bildschirme):

Mobile (kleinere Bildschirme):

Es ist auch möglich, um die Spalte zu wechseln, um mit der flexbox-Richtung utils...
```
<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 Ändern der Reihenfolge mit Flexbox-Richtung

Ältere version demos

demo - alpha 6

demo - beta (3)

erfahren Sie mehr Bootstrap 4.1+ Bestell-demos

Verwandte:

Spalte Bestellung in der Bootstrap-4 mit push/pull col-md-12

Bootstrap 4 ändern Sie die Reihenfolge der Spalten

A-C-B-A-B-C
- Die order-* - Klassen können nicht mehrfach verwendet werden. Das ist, wie es funktioniert. Aus der docs.. "Diese Klassen sind flexibel, so können Sie die Reihenfolge festlegen, indem Haltepunkt (z.B., .um-1.um-md-2). Enthält support für 1 bis 12 für alle fünf raster-Schichten."
- So order-2 order-md-12 Klassen können nicht zusammen verwendet werden?
- Nein, Sie kann zusammen verwendet werden.
- um-sm-2 und order-1 order-sm-2 funktionieren nicht. Ich mache es manuell
- Sie funktionieren, wenn Sie die version, die oben angegeben codeply.com/go/23VFxwWTdP. Auch, ich weiß nicht, was du versuchst zu erreichen, die ist wahrscheinlich anders als die ursprüngliche Frage, die sich meine Antwort bezieht. Denken Sie daran cols sind relativ zu einander in der gleichen Zeile.
- OP(@Cray) aufgefordert werden, für die Reihenfolge 1-3-2 auf dem Handy. Ihre ursprüngliche Antwort zeigt, dass es richtig( jetzt Durchgestrichen), aber modifizierte Antworten für bootstrap zeigt 1-2-3 auf dem Handy. Würden Sie in der Lage sein, dass zu beheben?
- Eigentlich ist der obige code korrekt ist, aber das Bild und die 2018 Update von Bootstrap 4.0+ demo zeigt nicht 1-3-2, um
- es funktioniert in 4.0, aber es würde nicht funktionieren in 4.0-alpha-wie oben erklärt
InformationsquelleAutor Zim

Dies kann auch erreicht werden mit der CSS - "Bestellen" - Eigenschaft und einem media-query.

Etwas wie dieses:

@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

InformationsquelleAutor bprdev

2

Ich bin mit Bootstrap 3, also ich weiß nicht, ob es ist ein einfacher Weg, es zu tun Bootstrap-4, aber dieses css sollte für Sie arbeiten:
```
.pull-right-xs {
    float: right;
}

@media (min-width: 768px) {
   .pull-right-xs {
      float: left;
   }
}
```
...und Klasse hinzufügen, zur zweiten Spalte:
```
<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>
```
EDIT:

Ohh... wie es aussieht, war das, was ich oben geschreiben ist genau eine .pull-xs-Recht Klasse in der Bootstrap-4 :X fügen Sie es Einfach zur zweiten Spalte, und es sollte perfekt funktionieren.
- leider so nicht funktioniert 🙁
- Ops... habe ich gemacht Fehler im Stil-code :X jetzt Versuchen. Und wenn, es würde nicht funktionieren, versuchen Sie, hinzufügen !wichtig zu schweben.
- Es ist das gleiche. Ich habe mit der .pull-xs-richtig Klasse aus Bootsrap 4.
InformationsquelleAutor Marek Kus

sogar das funktionieren wird:

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

InformationsquelleAutor nikhil sugandh

-1

Da Spalte-Bestellung funktioniert nicht in der Bootstrap-4 beta wie beschrieben in den code in der revisited Antwort oben, würden Sie brauchen, um verwenden Sie die folgenden (wie in der codeply 4 Flexbox, um demo - alpha/beta-links wurden in der 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 das "Flexbox, um demo - beta" geht, um einen alpha-codebase und die änderung der Codebasis der Beta (und es läuft) Ergebnisse in die divs falsch anzeigen in einer einzigen Spalte-aber das sieht aus wie ein codeply Problem, da Ausschneiden und einfügen den code aus der codeply funktioniert wie beschrieben.

InformationsquelleAutor user3893613
-4

Können Sie zwei verschiedene container mit mobilen Bestell-und ausblenden auf desktop-Bildschirm, ein anderes mit desktop -, um-und ausblenden auf Handy-Bildschirm
- Es würde funktionieren, aber es ist unnötig die Duplizierung der Daten. Sie können es tun, mit manipulation von float parametr (und propabbly einige andere Arten auch).
- Sollten Sie auch ein Beispiel zeigen
InformationsquelleAutor MarBer

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.