Manipulación de órdenes de columna usando col-lg-push y col-lg-pull en Twitter Bootstrap 3

Ahora estoy leyendo documentación en Twitter Bootstrap 3, y traté de seguir el orden de las columnas como se muestra en esta página, pero golpeé la pared. No entiendo por qué funciona un código ni cómo especificar correctamente la configuración. Lo que quiero mostrar es una cuadrícula, que está compuesta de longitud 5, y la otra longitud 5, y finalmente una cuadrícula de longitud 2.

Entonces el mío es algo como esto:

[5] [5] [2] 

Y lo que quiero lograr es que, cuando se visualice en el escritorio, se muestre el diseño anterior, pero cuando se muestre en un dispositivo móvil, primero quiera mostrar el segundo objeto de longitud 5, luego el primer objeto de longitud 5 y finalmente el objeto de longitud 2 verticalmente Me gusta esto:

 [5] (second) [5] (first) [2] 

Mientras traté de seguir el paso explicado en la documentación anterior, obtuve el primer objeto de longitud 5 sobre el segundo a pesar de estar en plataformas móviles, que como dije debería mostrar un objeto de 5 segundos de longitud en la parte superior. En otras palabras, obtuve esto:

 [5] (first) [5] (second) [2] 

Entonces, ¿cómo puedo colocar correctamente el segundo sobre el primero? O como utilizo el mismo objeto de longitud, ¿no podría funcionar el orden de las columnas?

Aquí está mi código para su información:

 

Además, la documentación no aclara qué significa pull o push . Entonces, ¿me estoy perdiendo algo?

Gracias.

Esta respuesta se divide en tres partes, ver a continuación para la versión oficial (v3 y v4)

Ni siquiera pude encontrar las clases col-lg-push-x o pull en los archivos originales para RC1 que descargué, así que compruebe su archivo bootstrap.css. con suerte, esto es algo que resolverán en RC2.

de todos modos, las clases col-push- * y pull existían y esto se adaptará a sus necesidades. Aquí hay una demostración

 
Content B
Content A
Content C

EDITAR: ABAJO ES LA RESPUESTA PARA LA PUBLICACIÓN OFICIAL v3.0

También vea esta publicación en el blog sobre el tema

  • col-vp-push-x = empuje la columna hacia la derecha por x número de columnas, comenzando desde donde la columna normalmente renderizaría -> position: relative , en un vp o en un puerto de vista más grande.

  • col-vp-pull-x = tira de la columna hacia la izquierda por x número de columnas, comenzando desde donde la columna normalmente renderizaría -> position: relative , en un puerto de vista vp o más grande.

    vp = xs, sm, md o lg

    x = 1 a 12

Creo que lo que ensucia a la mayoría de la gente es que necesita cambiar el orden de las columnas en su marcado HTML (en el ejemplo a continuación, B viene antes de A) , y que solo hace el empuje o tirando de los puertos de vista que son mayor o igual que lo que se especificó. es decir, col-sm-push-5 solo empujará 5 columnas en sm view-ports o superior. Esto se debe a que Bootstrap es un marco “móvil primero”, por lo que su HTML debe reflejar la versión móvil de su sitio. El Empujar y tirar se realiza en las pantallas más grandes.

  • (Escritorio) Puertos de vista más grandes que son empujados y tirados.
  • (Móvil) Los puertos de visualización más pequeños se procesan en el orden normal.

MANIFESTACIÓN

 
Content B
Content A
Content C

View-port> = sm

 |A|B|C| 

View-port

 |B| |A| |C| 

EDITAR: ABAJO ES LA RESPUESTA PARA v4.0

Con v4 viene flexbox y otros cambios al sistema de grillas y las clases push \ pull han sido eliminadas a favor de usar flexbox ordering.

  • Utilice las clases .order-* para controlar el orden visual (donde * = 1 a 12)
  • Esto también puede ser específico de nivel de cuadrícula .order-md-*
  • También .order-first (-1) y .order-last (13) disponible
 
1st yet 2nd
2nd yet 1st

Tire “tira” de la div hacia la izquierda del navegador y presione “empuja” la div hacia la izquierda del navegador.

Me gusta: enter image description here

Así que básicamente en un diseño de 3 columnas de cualquier página web, el “Cuerpo principal” aparece en el “Centro” y en la vista “Móvil” aparece el “Cuerpo principal” en la “Parte superior” de la página. Esto es principalmente deseado por todos los que tienen 3 diseños de columna.

 

This is Content

orem Ipsum ...

Puede verlo aquí: http://jsfiddle.net/DrGeneral/BxaNN/1/

Espero eso ayude

Simplemente sentí que agregaría mis $ 0.2 a esas 2 buenas respuestas. Tuve un caso cuando tuve que mover la última columna hasta la parte superior en una situación de 3 columnas.

[A B C]

a

[DO]

[UN]

[SEGUNDO]

La clase de .col-xx-push-X no hace más que .col-xx-push-X una columna a la derecha con la left: XX%; así que todo lo que tiene que hacer para presionar una columna hacia la derecha es agregar el número de pseudo columnas que van a la izquierda.

En este caso:

  • dos columnas ( col-md-5 y col-md-3 ) van a la izquierda, cada una con el valor de la que está yendo a la derecha;

  • uno ( col-md-4 ) va directamente por la sum de los dos primeros a la izquierda (5 + 3 = 8);


 
C
A
B

enter image description here

Concepto erróneo El concepto erróneo común con el ordenamiento de columnas es que debería (o podría) presionar y tirar de los dispositivos móviles, y que las vistas de escritorio deberían mostrarse en el orden natural del marcado. Esto está mal.

Reality Bootstrap es un primer marco móvil. Esto significa que el orden de las columnas en su marcado HTML debe representar el orden en el que desea que se muestren en los dispositivos móviles. Esto significa que empujar y tirar se realiza en las vistas de escritorio más grandes. no en la vista de dispositivos móviles …

Brandon Schmalz – Desarrollador web de stack completa Eche un vistazo a la descripción completa aquí

Si necesita organizar los datos en columnas de 1/2/4 dependiendo del tamaño de la ventana gráfica, entonces presionar y tirar puede no ser una opción. No importa cómo pida sus artículos en primer lugar, uno de los tamaños puede darle un orden incorrecto.

Una solución en este caso es usar filas anidadas y cols sin clases push o pull.

Ejemplo

En XS quieres …

 A B C D E F G H 

En SM quieres …

 AE BF CG DH 

En MD y más arriba quieres …

 ACEG BDFH 

Solución

Utilice elementos secundarios nesteds de dos columnas en un elemento principal circundante de dos columnas:

Aquí hay un fragmento de trabajo:

    

A

B

C

D

E

F

G

H