html - filas - ordenar columnas bootstrap 4
Bootstrap derecha Columna en la parte superior de la vista móvil (6)
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
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ó.
El siguiente código funciona para mí
.row {
display: flex;
flex-direction: column-reverse;
}
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.
Solía:
.row {
display: flex;
flex-direction: row-reverse;
}
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 ...
<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 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.