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.

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>

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

Me gusta:

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

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í

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>

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.