¿Cómo cambio el orden de las columnas de Bootstrap 3 en el diseño de dispositivos móviles?

Estoy haciendo un diseño receptivo con una barra de navegación fija superior. Debajo tengo dos columnas, una para una barra lateral (3) y otra para el contenido (9). Que en el escritorio se ve así

navbar
[3] [9]

Cuando cambio el resize del móvil, la navbar se comprime y se oculta, luego la barra lateral se astack en la parte superior del contenido, así:

navbar
[3]
[9]

Me gustaría tener el contenido principal en la parte superior, así que tengo que cambiar el orden en el móvil a este:

navbar
[9]
[3]

Encontré este artículo que cubre los mismos puntos, pero la respuesta aceptada ha sido editada para decir que la solución no se aplica a la versión actual de Bootstrap.

¿Cómo puedo reordenar estas columnas en el móvil? O, como alternativa, ¿cómo puedo obtener el grupo de listas sidbar en mi barra de navegación en expansión?

Aquí está mi código:

  

No puede cambiar el orden de las columnas en pantallas más pequeñas, pero puede hacerlo en pantallas grandes.

Así que cambia el orden de tus columnas.

  

Por defecto, esto muestra el contenido principal primero.

Por lo tanto, en el móvil, el contenido principal se muestra primero.

Al usar col-lg-push y col-lg-pull podemos reordenar las columnas en pantallas grandes y mostrar la barra lateral a la izquierda y el contenido principal a la derecha.

Violín de trabajo aquí .

Las respuestas aquí funcionan solo para 2 celdas, pero tan pronto como esas columnas tengan más en ellas puede llevar a un poco más de complejidad. Creo que encontré una solución general para cualquier número de celdas en múltiples columnas.

Metas

Obtenga una secuencia vertical de tags en el móvil para organizarse en el orden que el diseño requiera en la tableta / computadora de escritorio. En este ejemplo concreto, una etiqueta debe ingresar al flujo antes de lo normal, y otra más tarde de lo normal.

Móvil

 [1 headline] [2 image] [3 qty] [4 caption] [5 desc] 

Tablet +

 [2 image ][1 headline] [ ][3 qty ] [ ][5 desc ] [4 caption][ ] [ ][ ] 

Por lo tanto, el título debe mezclarse directamente en la tableta +, y técnicamente, también lo hace desc – se encuentra sobre la etiqueta de título que lo precede en el móvil. En un momento, verá que 4 leyendas también tienen problemas.

Supongamos que cada celda puede variar en altura y debe nivelarse de arriba a abajo con su siguiente celda (descartando trucos débiles como una tabla).

Al igual que con todos los problemas de Bootstrap Grid, el paso 1 es darse cuenta de que el HTML debe estar en el orden de dispositivo móvil, 1 2 3 4 5, en la página. Luego, determine cómo hacer que la tableta / computadora de escritorio se reordene de esta manera, idealmente sin Javascript.

La solución para obtener 1 headline y 3 qty para sentarse a la derecha y no a la izquierda es simplemente configurarlos a pull-right . Esto aplica CSS float: right , lo que significa que encuentran el primer espacio abierto que encajarán a la derecha. Puedes pensar que el procesador CSS del navegador funciona en el siguiente orden: 1 cabe en la esquina superior derecha. 2 es el siguiente y es regular ( float: left ), por lo que va a la esquina superior izquierda. Luego 3, que es float: right así que salta por debajo de 1.

Pero esta solución no fue suficiente para 4 caption ; porque las 2 celdas correctas son tan cortas 2 image a la izquierda tiende a ser más larga que las dos combinadas. Bootstrap Grid es un hack flotante glorificado, lo que significa que 4 caption es float: left . Con 2 image ocupando tanto espacio a la izquierda, 4 caption intentan encajar en el siguiente espacio disponible, a menudo en la columna de la derecha, no en la izquierda donde lo queríamos.

La solución aquí (y más en general para cualquier tema como este) era agregar una etiqueta de pirateo, oculta en el móvil, que existe en la tableta + para desplazar el subtítulo, que luego se cubre con un margen negativo, como este:

 [2 image ][1 headline] [ ][3 qty ] [ ][4 hack ] [5 caption][6 desc ^^^] [ ][ ] 

http://jsfiddle.net/b9chris/52VtD/16633/

HTML:

 
Product Headline
Product Image
Qty, Add to cart
Product image caption
Product description

CSS:

 #hack { height: 50px; } @media (min-width: @screen-sm) { #desc { margin-top: -50px; } } 

Entonces, la solución generalizada aquí es agregar tags de hack que pueden desaparecer en el móvil. En la tableta, las tags de hack permiten que las tags que se muestran aparezcan más adelante o más temprano en el flujo, luego tiran hacia arriba o hacia abajo para cubrir esas tags de hackeo.

Nota: He utilizado alturas fijas por el simple ejemplo en el jsfiddle vinculado, pero el contenido real del sitio en el que estaba trabajando varía en altura en las 5 tags. Se representa correctamente con una variación relativamente grande en alturas de etiqueta, especialmente imagen y desc.

Nota 2: Dependiendo de su diseño, es posible que tenga un orden de columnas suficientemente consistente en la tableta + (o resoluciones más grandes), que puede evitar el uso de tags de acceso, usando el margin-bottom lugar, de esta manera:

Nota 3: Utiliza Bootstrap 3. Bootstrap 4 usa un conjunto de grillas diferente, y no funcionará con estos ejemplos.

http://jsfiddle.net/b9chris/52VtD/16632/

Actualizado 2018

Para la pregunta original basada en Bootstrap 3 , la solución fue usar push-pull para los anchos más grandes, y luego las columnas mostrarán su orden natural en anchos más pequeños (x). (AB inverso a BA).

 
main
sidebar

Bootstrap 3: http://www.codeply.com/go/wgzJXs3gel

@Emre declaró: ” No se puede cambiar el orden de las columnas en pantallas más pequeñas, pero se puede hacer eso en pantallas grandes “.

Sin embargo, esto debe aclararse para indicar: “No puede cambiar el orden de las columnas” astackdas “de ancho completo … en Bootstrap 3.


Sin embargo, en Bootstrap 4 ahora es posible cambiar el orden, incluso cuando las columnas son de ancho completo astackdas verticalmente, gracias a Bootstrap 4 flexbox. OFC, el método push pull seguirá funcionando, pero ahora hay otras maneras de cambiar el orden de las columnas en Bootstrap 4, lo que permite reordenar columnas de ancho completo.

Método 1 – Use flex-column-reverse para pantallas xs :

 
sidebar
main

Método 2: utilice flex-first para pantallas xs (u order-* en 4.0.0) :

 
sidebar
main

Bootstrap 4 (alpha 6): http://www.codeply.com/go/bBMOsvtJhD
Bootstrap 4.0.0: https://www.codeply.com/go/e0v77yGtcr

Octubre de 2017

Me gustaría agregar otra solución Bootstrap 4. Uno que funcionó para mí.

La propiedad de “Pedido” de CSS, combinada con una consulta de medios, se puede usar para reordenar columnas cuando se astackn en pantallas más pequeñas.

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

Ajuste el tamaño de la pantalla y verá que las columnas se astackn en un orden diferente.

Voy a atar esto con la pregunta del cartel original. Con CSS, la barra de navegación, la barra lateral y el contenido se pueden orientar y luego ordenar las propiedades aplicadas dentro de una consulta de medios.

Comenzando con la versión móvil primero, puede lograr lo que quiera, la mayoría de las veces.

Ejemplos aquí:

http://jsbin.com/wulexiq/edit?html,css,output

 

PUSH - PULL Bootstrap demo

Version 1:

IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
TOP ROW XS-SMALL SCREEN
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
MIDDLE ROW ON XS-SMALL
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
BOTTOM ROW ON XS-SMALL

Version 2:

TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
TOP ROW ON XS-SMALL
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
MIDDLE ROW XS-SMALL SCREEN
IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
BOTTOM ROW ON XS-SMALL

Version 3:

TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
MIDDLE ROW ON XS-SMALL
IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
BOTTOM ROW XS-SMALL SCREEN

Version 4:

TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
TOP ROW XS-SMALL SCREEN
MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
MIDDLE ROW ON XS-SMALL
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
BOTTOM ROW ON XS-SMALL

En Bootstrap 4 , si quieres hacer algo como esto:

  Mobile | Desktop ----------------------------- A | A C | BC B | D D | 

Debe invertir el orden de B luego C y luego aplicar el order-{breakpoint}-first a B. Y aplique dos configuraciones diferentes, una que haga que compartan las mismas columnas y otra que las haga tomar todo el ancho de las 12 columnas:

  • Pantallas más pequeñas: 12 cols a B y 12 cols a C

  • Pantallas más grandes: 12 cols entre la sum de ellos ( B + C = 12)

Me gusta esto

 
A
C
B
D

Demostración: https://codepen.io/anon/pen/wXLGKa

Esto es bastante fácil con jQuery usando insertAfter () o insertBefore ().

content
sidebar