Manipulación del orden de las columnas mediante col-lg-push y col-lg-pull en Twitter Bootstrap 3

159

Ahora estoy leyendo documentación en Twitter Bootstrap 3, e intenté seguir el orden de las columnas como se muestra en esta página, pero golpeé la pared. No entiendo por qué funciona ese código ni cómo especificar correctamente la configuración. Lo que quiero mostrar es una cuadrícula, que consta 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 ve en el escritorio, se muestra el diseño anterior, pero cuando se ve en el móvil, quiero mostrar primero 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]  

Si bien intenté 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 el segundo objeto de longitud 5 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 uso el mismo objeto de longitud, ¿podría no funcionar el orden de 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é pullo qué pushsignifica. Entonces, ¿me estoy perdiendo algo?

Gracias.

Blaszard
fuente
try class = "col-lg-5 col-sm-5 col-sm-push-5" y lo mismo para el 2º con tirón
Dawood Awan
Un ejemplo fácil y claro (es para el diseño de 2 columnas, pero obtendrá el punto de inmediato y podrá agregar columnas adicionales según sea necesario) se puede encontrar aquí en la parte inferior de la página titulada "Empujar y tirar - Cambiar el orden de las columnas ": w3schools.com/bootstrap/bootstrap_grid_examples.asp
Tyler Rafferty

Respuestas:

283

Esta respuesta consta de tres partes, consulte a continuación el lanzamiento 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 revise su archivo bootstrap.css. con suerte, esto es algo que resolverán en RC2.

de todos modos, existían las clases col-push- * y pull 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 de blog sobre el tema

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

  • col-vp-pull-x= jale la columna hacia la izquierda por x número de columnas, comenzando desde donde la columna normalmente representarí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 confunde a la mayoría de las personas es que necesita cambiar el orden de las columnas en su marcado HTML (en el ejemplo a continuación, B viene antes que A) , y que solo empuja o tira de los puertos de vista que son mayor o igual que lo especificado. es decir col-sm-push-5, solo empujará 5 columnas en smlos puertos de vista o más. 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. Empujar y tirar se realizan en las pantallas más grandes.

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

MANIFESTACIÓN

<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 en el sistema de cuadrícula y las clases push \ pull se han eliminado a favor del uso de pedidos de flexbox.

  • Use .order-*clases para controlar el orden visual (donde * = 1 a 12)
  • Esto también puede ser específico del nivel de cuadrícula .order-md-*
  • También .order-first(-1) y .order-last(13) disponibles

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

Schmalzy
fuente
Gracias. Cambié mis scripts importables a aquellos que cloné desde el repositorio de github, luego funcionó como se esperaba. Los guiones iniciales no incluyeron col-lg-pushcomo usted dijo. Muchas gracias.
Blaszard
2
Gracias, lo más grande que me atrapó, ya que suponía que sería menor que. Pero supongo que el desarrollador primero móvil, tiene sentido.
Allerion
Creo que la segunda opción, "<= sm", debería ser solo "<", ya que ambos no pueden tener "="
Shawn Taylor
2
voltear el orden de las columnas (móvil primero), ¡ese es el truco! ¡Gracias!
Wietse
En Bootstrap v4 ahora se denominan {push / pull} - {vp} - {1-12}, por ejemplo, push-md-4
pasql
36

Pull "tira" del div hacia la izquierda del navegador y Push "empuja" el div hacia la izquierda del navegador.

Me gusta: ingrese la descripción de la imagen aquí

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", el "Cuerpo principal" aparece en la "Parte superior" de la página. Esto es principalmente deseado por todos con un diseño de 3 columnas.

<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

DrGeneral
fuente
3
Empujar y tirar no "asigna márgenes". Cambian el orden de las columnas. En su ejemplo, la columna Contenido normalmente ocuparía las columnas 1-4 en un tamaño grande, y la columna Barra lateral ocuparía las columnas 5-8. Esto se basa en su orden en el marcado. Puede cambiar su orden cambiándolos en el marcado, pero si por alguna razón no desea hacerlo (por ejemplo, hacer que el código sea más semántico con el contenido principal primero), puede cambiar su orden con clases push y pull.
T Nguyen
1
(continuación). En su ejemplo, al agregar col-lg-push-4cambios en la columna Contenido de las columnas 1-4 a 5-8 'empujando' 4 columnas. Del mismo modo, col-lg-pull-4"tira" de la columna de la barra lateral de 5-8 a 1-4.
T Nguyen
1
col - $$ - offset-XX aplica los valores de margen izquierdo
beauXjames
16

Concepto erróneo El concepto erróneo común con el orden de las columnas es que debería (o podría) empujar 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 framework móvil. Esto significa que el orden de las columnas en su marcado HTML debe representar el orden en 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 dispositivos móviles ver ..

Brandon Schmalz - Desarrollador web Full Stack Eche un vistazo a la descripción completa aquí

Syed Ali
fuente
15

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

[C]

[UNA]

[SI]

La clase de Boostrap .col-xx-push-Xno hace nada más left: XX%; que empujar una columna hacia la derecha, por lo que todo lo que tiene que hacer para empujar una columna hacia la derecha es agregar el número de pseudo columnas hacia la izquierda.

En este caso:

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

  • one ( col-md-4) va hacia la derecha por la suma de los dos primeros hacia 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>

ingrese la descripción de la imagen aquí

Kuba
fuente
2

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

Una solución en este caso es usar filas y columnas anidadas sin ninguna clase de inserción o extracción.

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

A   C   E   G
B   D   F   H


Solución

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

Aquí hay un fragmento de trabajo:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript" ></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>A</p><p>B</p></div>
      <div class="col-md-6"><p>C</p><p>D</p></div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>E</p><p>F</p></div>
      <div class="col-md-6"><p>G</p><p>H</p></div>
    </div>
  </div>
</div>

Otra belleza 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 ser barajados, lo cual es bueno para la generación de CMS.

Jpsy
fuente