Pedido de columnas en Bootstrap 4

Tengo 3 columnas que deseo ordenar de diferentes formas en computadoras de escritorio y dispositivos móviles. Actualmente, mi ceñidor se ve así:

1
2
3

En la vista móvil, quiero tener el siguiente orden:

1-3-2

Desafortunadamente no entiendo cómo resolver esto con las clases .col-md-push- * y .col-md-pull- * en Bootstrap 4.

Revisando esta pregunta con la última Bootstrap 4.0+ .

Las clases de pedidos receptivos ahora son order-first order-last , order-last y order-0 order-12

Las clases push pull de Bootstrap 4 ahora son push-{viewport}-{units} y pull-{viewport}-{units} y el xs- infix ha sido eliminado. Para obtener el diseño 1-3-2 deseado en dispositivos móviles / xs sería: demostración de extracción de inserción Bootstrap 4


Como Bootstrap 4 es flexbox, es fácil cambiar el orden de las columnas. Los cols se pueden ordenar de la order-1 a la order-12 , de forma receptiva, como order-md-12 order-2 (último en md , 2nd en xs ) relativo al padre .row .

 
1
3
2

Actualización 2018 Bootstrap 4.0+
Demostración de pedido de Col

Escritorio (pantallas más grandes): enter image description here

Móvil (pantallas más pequeñas): enter image description here

Demostraciones de versiones anteriores
demo – alpha 6
demo – beta (3)

Ver más demostraciones de pedido Bootstrap 4.0+


Relacionado:
Orden de columna en Bootstrap 4 con push / pull y col-md-12
Bootstrap 4 cambia el orden de las columnas

ACB ABC

Esto también se puede lograr con la propiedad CSS “Order” y una consulta de medios.

Algo como esto:

 @media only screen and (max-width: 768px) { #first { order: 2; } #second { order: 4; } #third { order: 1; } #fourth { order: 3; } } 

Enlace CodePen: https://codepen.io/prestn206/pen/EwrXqm

Estoy usando Bootstrap 3, así que no sé si hay una forma más fácil de hacerlo Bootstrap 4 pero este CSS debería funcionar para usted:

 .pull-right-xs { float: right; } @media (min-width: 768px) { .pull-right-xs { float: left; } } 

… y agrega clase a la segunda columna:

 
1
2
3

EDITAR:

Ohh … parece que lo que escribí arriba es exactamente a. clase pull-xs-right en Bootstrap 4: X Simplemente agréguela a la segunda columna y debería funcionar perfectamente.

incluso esto funcionará:

 
1
2
3

Debido a que el ordenamiento de columnas no funciona en Bootstrap 4 beta como se describe en el código provisto en la respuesta revisada anterior, necesitaría usar lo siguiente (como se indica en la demostración de pedido de Flexbox de Codeply 4: enlaces alfa / beta que se proporcionaron en la respuesta).

 
1
3
2

Sin embargo, tenga en cuenta que la “demo de pedido de Flexbox – beta” va a una base de código alfa, y cambiar la base de código a Beta (y ejecutarlo) hace que los divs se muestren incorrectamente en una sola columna, pero parece un problema codeply desde que cortó y pegar el código de Codeply funciona como se describe.

Puede hacer dos contenedores diferentes uno con orden móvil y ocultarlos en la pantalla del escritorio, otro con el orden de escritorio y ocultarlos en la pantalla del móvil

Intereting Posts