html - filas - ordenar columnas bootstrap 4

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

Question

Tengo una página de 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 la B en la parte superior. es posible? Lo intenté con presionar y tirar, pero no funcionó.

Answer 1

Dirección Flexbox

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

.flex-row-reverse

Para una configuración receptiva:

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

Answer 2

El siguiente código funciona para mí

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

Answer 3

En Bootstrap V4 (publicado el 18 de enero de 2018), puede usar Clases de reordenamiento. Información aquí debajo de la pestaña Reordenación.

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

Answer 4

Solía:

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

Answer 5

Use el orden de columnas para lograr esto. Ver también este artículo sobre Ordenar Columnas

col-md-push-6 "empujará" la columna hacia la derecha 6 y col-md-pull-6 "jalará" la columna hacia la izquierda en "md" o en los puertos de visualización mayores. En cualquier puerto de vista más pequeño, las columnas estarán en orden normal nuevamente.

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

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|

Answer 6

Vale la pena señalar que si está utilizando columnas que no son ambas iguales a 6, entonces la cantidad de inserción no será igual al tamaño de la columna inicial.

Si tiene 2 columnas (A y B) y desea que la columna A sea más pequeña y hacia la derecha en las ventanas con vista "sm" o mayores, pero encima de una ventana móvil (xs), debería usar 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.