Bootstrap rechts Spalte oben in der mobilen Ansicht

Ich habe eine Bootstrap-Seite wie diese:

<div class="row">
    <div class="col-md-6">
        A
    </div>
    <div class="col-md-6">
       B
    </div>
</div>

Sieht aus wie:

-----
|A|B|
-----

Wenn ich es mir also auf einem mobilen Gerät ansehe, befindet sich die Spalte A oben, aber ich möchte das B oben. Ist das möglich? Ich habe es mit Push-and-Pull versucht, aber es hat nicht funktioniert.

Verwenden Sie die Reihenfolge der Spalten , dies zu erreichen.

col-md-push-6"schiebt" die Spalte nach rechts 6 und col-md-pull-6"zieht" die Spalte nach links auf "md" oder größeren Ansichtsöffnungen. Bei kleineren Ansichtsfenstern sind die Spalten wieder in normaler Reihenfolge.

Ich denke, was die Leute abschreckt, ist, dass Sie B über A in Ihrem HTML setzen müssen . Es kann einen anderen Weg geben, dies zu tun, bei dem A im HTML über B gehen kann, aber ich bin mir nicht sicher, wie ich es tun soll ...

DEMO

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

Ansichtsfenster> = md

|A|B|

Ansichtsfenster <md

|B|
|A|

Wenn Sie Spalten verwenden, die nicht beide gleich 6 sind, entspricht der Push-Betrag nicht der anfänglichen Spaltengröße.

Wenn Sie 2 Spalten (A & B) haben und möchten, dass Spalte A in "sm" - oder größeren Ansichtsfenstern kleiner und rechts ist, sich jedoch auf einem mobilen (xs) Ansichtsfenster befindet, verwenden Sie Folgendes:

<div class="row">
    <div class="col-sm-4 col-sm-push-8">A</div>
    <div class="col-sm-8 col-sm-pull-4">B</div>
</div>

Andernfalls wird die Ausrichtung der Spalten deaktiviert.

Flexbox-Richtung

Wenden Sie für Bootstrap 4 eine der folgenden Optionen auf Ihre .row div an:

.flex-row-reverse

Für reaktionsschnelle Einstellungen:

.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse

Der folgende Code funktioniert für mich

.row {
    display: flex;
    flex-direction: column-reverse;
}

Angenommen, Sie möchten in Bootstrap 4 eine Reihenfolge für große Bildschirme und eine andere Reihenfolge für kleinere Bildschirme haben:

<div class="container">
  <div class="row">
    <div class="col-6 order-1 order-lg-2">
      This column will be ordered second on large to extra large screens
    </div>
    <div class="col-6 order-2 order-lg-1">
      This column will be ordered first on large to extra large screens
    </div>
  </div>
</div>

Sie können order-1und order-2darüber weglassen . Nur zur Klarheit hinzugefügt. Die Standardreihenfolge ist die Reihenfolge, in der die Spalten im HTML-Code angezeigt werden.

Weitere Informationen finden Sie unter https://getbootstrap.com/docs/4.1/layout/grid/#reordering

Dies erfolgt jetzt (in Bootstrap v4) durch Hinzufügen von order- # Klassen.

Siehe https://getbootstrap.com/docs/4.1/migration/#grid-system-1

So was:

<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>

Ich habe drei Bootstrap 4 Spalten unterschiedlicher Größe. Wenn der Bildschirm kleiner wird, wird die dritte Spalte ausgeblendet. Wenn der Bildschirm noch kleiner wird und die Divs gestapelt sind, ändert sich die Reihenfolge, sodass Spalte 2 oben steht.

    <div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
        <h3>LEFT HAND SECTION</h3>
        <p>For news, links photos or comments.</p>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
        <h3>MAIN SECTION</h3>
        <p>The main content for the page.</p>
    </div>
    <div class="col-xs-12 col-md-4 d-none d-md-block order-last">
        <h3>BLANK SECTION</h3>
        <p>Will usually just be blank.</p>
    </div>

Ich hoffe das hilft. Ich fand es schwierig, das zu verstehen, kam aber mit Hilfe dieses Threads endlich dahin, aber es war ein bisschen ein Hit und Miss.

Dies funktionierte für mich auf Bootstrap 4:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 order-md-last">
      <%= render 'form'%>
    </div>
    <div class="col-md-8 order-md-first">
      CONTENT
    </div>
  </div>
</div>

Ich benutzte:

.row {
   display: flex;
   flex-direction: row-reverse;
}

In Bootstrap V4 (veröffentlicht am 18. Januar 2018) können Sie Klassen neu anordnen. Infos hier auf der Registerkarte Neuordnung.

https://getbootstrap.com/docs/4.0/layout/grid/

Bootstrap 4 enthält Klassen für Flex. Siehe: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/

<div class="row flex-column-reverse flex-md-row">
    <div class="col-sm-10">
        Col 1
    </div>
    <div class="col-sm-2">
       Col 2
    </div>
</div>