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

Ich habe zwei Spalten mit der Klasse col-md-12 jeder.

In der desktop-Ansicht, die Sie anzeigen soll, wie:

Col **1** 
Col **2**

In der mobilen Ansicht das anzeigen soll, wie diese:

Col **2**
Col **1**

Ist dies auch möglich mit der Spalte Bestellung von Bootstrap?

Mein Aktueller code:

<div class="row">
    <div class="col-xs-push-12 col-md-12">
        Col 1
    </div>
    <div class="col-xs-pull-12 col-md-12">
        Col 2
    </div>
</div>
können Sie zeigen Sie Ihren code?
siehe oben, ich habe meinen code
Sie haben verpasst, Ihre Basis Spalte code... col-xs-12
funktioniert immer noch nicht.. die Spalten sind viel zu weit Links/rechts 🙁
Das ist, weil es 100% Breite. Siehe andere Frage: stackoverflow.com/q/25714852/3739498

InformationsquelleAutor Cray | 2016-07-07

  1. 17

    Update 2018 - Bootstrap-4.1.0

    Nun in voller Breite, 12 Einheit col-*-12 Spalten rückgängig gemacht werden können, mit flexbox bestellen.

    In älteren Bootstrap 4 alpha-und beta-Versionen der Bestell-utils wurden flex-*...

    <div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 flex-first flex-md-unordered">
        Col 2
    </div>
</div>

    Demo Bootstrap-4 Alpha

    Als der Bootstrap 4.0.0 die Bestellung utils sind order-*...

    <div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 order-first order-md-2">
        Col 2
    </div>
</div>

    Demo-Bootstrap-4.1.0 -

    Siehe die Dokumentation auf https://getbootstrap.com/docs/4.0/layout/grid/#order-classes

    Dies sollte auf jeden Fall die bevorzugte Antwort jetzt, da es sich nicht auf externe CSS-Regeln, etc.
    Dies muss der am günstigsten gelegene Antwort jetzt.
    und Routhinator Hey Jungs, die ich gerade aktualisiert meine obige Antwort mit der version der beta-Version.
    die beta-version schon nutzen lassen order- utility-Klassen, überprüfen Sie meine Antwort mit dem Oktober-update und/oder das CSS von beta-version, die Sie haben, aktualisiert das Dienstprogramm 😉
    Dude. Was ist der deal für uns Leute, die nicht ständig mit Bootstrap. Warum machen Sie solch eine Benennung zu ändern. Das war sehr mühsam zu finden. Schätzen die post.

    InformationsquelleAutor Zim

  2. 1

    Ein Weg, um dieses ist es, zwei Versionen von Col 2 und setzen Sie ein, über Col 1 und eine darunter. Dann verwenden Sie die responsive utilities zu verstecken und zeigen Sie entsprechend an.

    hmm, scheint ein bisschen "dirty"
    Es IST ein bisschen schmutzig, aber wenn wir diskutieren in voller Breite zu Spalten, es ist eine der besseren Optionen. Wenn Sie kleinere Netze konnten wir Vertrauen auf col-*-push-* und col-*-pull-* zu erreichen Ihrer gewünschten Ergebnisse.
    Wenn Sie möchten, bekommen wirklich verrückt, können Sie mit jQuery und Klonen und legen Sie es vor Col 1 auf einem $(window).resize() handler.

    InformationsquelleAutor Taylor Foster

  3. 1

    Können Sie flexbox, dann können Sie Medienabfragen verwenden, um die Reihenfolge zu ändern:

    .row {
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;
}

    CODEPEN

    oder (Standard um auf Handys und tablets, Rückseite auf dem desktop):

    @media (min-width: 992px) {
  .row {
    /* Setup Flexbox */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* Reverse Column Order */
    -webkit-flex-flow: column-reverse;
    flex-flow: column-reverse;
  }
}

    CODEPEN

    danke, aber ich möchte eine abweichende Reihenfolge, in der mobile und desktop
    Ich weiß, Sie können Medien-Anfragen, ich gebe Ihnen ein Beispiel.
    könnte eine option sein, wenn es keine Lösung mit der Spalte bestellen
    Wenn Sie kümmern sich nicht darum, IE9 und unten es ist eine gute option.

    InformationsquelleAutor max

Schreibe einen Kommentar