css - inside - bootstrap col md4

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

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:

<div class=''row''> <div class=''col-lg-5 col-lg-push-5''></div> <div class=''col-lg-5 col-lg-pull-5''></div> <div class=''col-lg-2''></div> </div>

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

Gracias.

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 ...

A E B F C G D H

En MD y más arriba quieres ...

A C E G B D F H

Solución

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

Aquí hay un fragmento de trabajo:

Otra de las ventajas de esta solución es que los elementos aparecen en el código en su orden natural (A, B, C, ... H) y no tienen que barajarse, lo que es bueno para la generación de CMS.

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]

[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 suma de los dos primeros a la izquierda (5 + 3 = 8);

<div class="row"> <div class="col-md-4 col-md-push-8 "> C </div> <div class="col-md-5 col-md-pull-4"> A </div> <div class="col-md-3 col-md-pull-4"> B </div> </div>

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

Me gusta:

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.

<div class="container"> <div class="row"> <div id="content" class="col-lg-4 col-lg-push-4 col-sm-12"> <h2>This is Content</h2> <p>orem Ipsum ...</p> </div> <div id="sidebar-left" class="col-lg-4 col-sm-6 col-lg-pull-4"> <h2>This is Left Sidebar</h2> <p>orem Ipsum...</p> </div> <div id="sidebar-right" class="col-lg-4 col-sm-6"> <h2>This is Right Sidebar</h2> <p>orem Ipsum.... </p> </div> </div> </div>

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

Espero eso ayude

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 pila completa Eche un vistazo a la descripción completa aquí

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

<div class="row"> <div class="col-sm-5 col-push-5"> Content B </div> <div class="col-sm-5 col-pull-5"> Content A </div> <div class="col-sm-2"> Content C </div> </div>

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.

DEMO

<div class="row"> <div class="col-sm-5 col-sm-push-5"> Content B </div> <div class="col-sm-5 col-sm-pull-5"> Content A </div> <div class="col-sm-2"> Content C </div> </div>

View-port> = sm

|A|B|C|

View-port <sm

|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

<div class="row"> <div class="col order-2">1st yet 2nd</div> <div class="col order-1">2nd yet 1st</div> </div>