Bootstrap colonna destra in alto sulla vista mobile

Ho una pagina Bootstrap come questa:

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

Sembra:

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

Quindi, se lo guardo su un dispositivo mobile, la colonna A è in alto, ma voglio la B in alto. È possibile? L'ho provato con una spinta, ma non ha funzionato.

Utilizzare l' ordinamento di colonna per ottenere questo risultato.

col-md-push-6"spingerà" la colonna verso destra 6 e col-md-pull-6"tirerà" la colonna verso sinistra su "md" o maggiori porte di visualizzazione. Su qualsiasi porta di visualizzazione più piccola le colonne saranno di nuovo in ordine normale.

Penso che ciò che scoraggia le persone, è che devi mettere B sopra A nel tuo HTML . Potrebbe esserci un modo diverso per farlo in cui A può andare sopra B in HTML, ma non sono sicuro di come farlo ...

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>

view-port> = md

|A|B|

view-port <md

|B|
|A|

Vale la pena notare che se si utilizzano colonne che non sono entrambe uguali a 6, la quantità di push non sarà uguale alla dimensione della colonna iniziale.

Se hai 2 colonne (A e B) e desideri che la colonna A sia più piccola e a destra nelle finestre "sm" o maggiori, ma in cima a una finestra mobile (xs), utilizzeresti quanto segue:

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

Altrimenti, l'allineamento delle colonne apparirà fuori.

Direzione Flexbox

Per Bootstrap 4, applica una delle seguenti opzioni al tuo div .row:

.flex-row-reverse

Per impostazioni reattive:

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

In Bootstrap 4, supponiamo che tu voglia avere un ordine per schermi di grandi dimensioni e un ordine diverso per schermi più piccoli:

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

Puoi omettere order-1e order-2sopra. Appena aggiunto per chiarezza. L'ordine predefinito sarà l'ordine di visualizzazione delle colonne nell'html.

Per maggiori informazioni https://getbootstrap.com/docs/4.1/layout/grid/#reordering

Il codice seguente funziona per me

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

Questo è ora fatto (in Bootstrap v4) aggiungendo le classi ordine #.

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

Come questo:

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

Ho tre bootstrap 4 colonne di diverse dimensioni. Man mano che lo schermo si riduce, la terza colonna viene nascosta, quindi quando lo schermo diventa più piccolo e i div vengono impilati, l'ordine cambia in modo che la colonna 2 sia in alto.

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

Spero che aiuti. Ho trovato difficile capire questo, ma finalmente ci sono arrivato con l'aiuto di questo thread, ma è stato un po 'incostante.

Questo ha funzionato per me su 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>

Ero solito:

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

In Bootstrap V4 (rilasciato il 18 gennaio 2018) è possibile utilizzare le classi di riordino. Informazioni qui nella scheda Riordino.

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

Bootstrap 4 include classi per la flessibilità. Vedi: 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>