Bootstrap Columna derecha en la parte superior en la vista móvil

Tengo una página Bootstrap como esta:

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

Parece:

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

Entonces, si lo miro en un dispositivo móvil, la columna A está en la parte superior, pero quiero que la B esté en la parte superior. es posible? Lo intenté con un tirón, pero no funcionó.

Usar ordenamiento de columnas para lograr esto.

col-md-push-6"empujará" la columna hacia la derecha 6 y "empujará" la columna hacia la col-md-pull-6izquierda en "md" o en puertos de vista superiores. En cualquier puerto de vista más pequeño, las columnas volverán a estar en orden normal.

Creo que lo que desalienta a la gente es que debes poner B encima de A en tu HTML . Puede haber una forma diferente de hacer esto donde A puede ir por encima de B en el HTML, pero no estoy seguro de cómo hacerlo ...

MANIFESTACIÓN

<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 señalar que si está utilizando columnas que no son iguales a 6, entonces la cantidad de inserción no será igual al tamaño de columna inicial.

Si tiene 2 columnas (A y B) y desea que la columna A sea más pequeña y a la derecha en las ventanas "sm" o mayores, pero encima de una ventana móvil (xs), usaría lo siguiente:

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

De lo contrario, la alineación de las columnas aparecerá desactivada.

Dirección Flexbox

Para Bootstrap 4, aplique uno de los siguientes a su div .row:

.flex-row-reverse

Para configuraciones receptivas:

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

En Bootstrap 4, supongamos que desea tener un pedido para pantallas grandes y otro para pantallas más pequeñas:

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

Puedes omitir order-1y order-2más. Recién agregado para mayor claridad. El orden predeterminado será el orden en que aparecen las columnas en el html.

Para más información https://getbootstrap.com/docs/4.1/layout/grid/#reordering

El siguiente código me funciona

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

Esto ahora se hace (en Bootstrap v4) agregando order- # clases

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

Me gusta esto:

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

Tengo tres bootstrap 4 columnas de diferentes tamaños. A medida que la pantalla se hace más pequeña, la tercera columna se oculta, luego, cuando la pantalla se vuelve más pequeña y los divs se apilan, el orden cambia para que la columna 2 esté en la parte superior.

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

Espero que esto ayude. Me resultó difícil entender esto, pero finalmente llegué allí con la ayuda de este hilo, pero fue un poco impredecible.

Esto funcionó para mí en 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>

Solía:

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

En Bootstrap V4 (Lanzado el 18 de enero de 2018) Puede usar Reordenar clases. Información aquí en la pestaña Reordenamiento.

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

Bootstrap 4 incluye clases para flex. Ver: 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>