Agora estou lendo a documentação no Twitter Bootstrap 3 e tentei seguir a ordem das colunas, como mostrado nesta página, mas atingi a parede. Não entendo por que esse código funciona nem como especificar corretamente a configuração. O que eu quero mostrar é uma grade, que consiste no comprimento 5, e o outro comprimento 5 e, finalmente, uma grade 2.

Então o meu é algo como isto:

[5] [5] [2]

E o que eu quero alcançar é que, quando visualizado na área de trabalho, o layout acima é exibido, mas quando visualizado no celular, quero mostrar primeiro o segundo objeto 5 de comprimento, depois o primeiro objeto 5 de comprimento e, finalmente, o objeto 2 de comprimento. verticalmente. Como isso:

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

Enquanto eu tentava seguir a etapa explicada na documentação acima, obtive o primeiro objeto de comprimento 5 em relação ao segundo, apesar de estar em plataformas móveis, que, como disse, devem exibir o segundo objeto de comprimento 5 na parte superior. Em outras palavras, eu entendi isso:

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

Então, como posso colocar corretamente o segundo sobre o primeiro? Ou como eu uso o mesmo objeto de comprimento, a ordenação da coluna não funcionou?

Aqui está o meu código para sua informação:

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

Além disso, a documentação não esclarece o que pullou o que pushsignifica. Então, estou perdendo alguma coisa?

Obrigado.

Esta resposta está dividida em três partes, veja abaixo o release oficial (v3 e v4)

Não consegui nem encontrar as classes col-lg-push-x ou pull nos arquivos originais do RC1 que baixei, portanto verifique seu arquivo bootstrap.css. espero que isso seja algo que eles resolvam no RC2.

de qualquer forma, as classes col-push- * e pull existiam e isso atenderá às suas necessidades. Aqui está uma demonstração

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

EDIT: ABAIXO É A RESPOSTA DO COMUNICADO OFICIAL v3.0

Veja também Esta postagem do blog sobre o assunto

• col-vp-push-x= empurre a coluna para a direita pelo número x de colunas, começando de onde a coluna renderizaria normalmente -> position: relative, em uma porta de visualização vp ou maior.

• col-vp-pull-x= puxe a coluna para a esquerda pelo número x de colunas, começando de onde a coluna renderizaria normalmente -> position: relative, em uma porta de visualização vp ou maior.

  vp = xs, sm, md ou lg

  x = 1 a 12

Eu acho que o que atrapalha a maioria das pessoas é que você precisa alterar a ordem das colunas na sua marcação HTML (no exemplo abaixo, B vem antes de A) , e que ele apenas pressiona ou puxa as portas de exibição que são maior ou igual ao especificado. ou seja col-sm-push-5, empurrará apenas 5 colunas nas smportas de visualização ou mais. Isso ocorre porque o Bootstrap é uma estrutura "móvel primeiro", portanto, seu HTML deve refletir a versão móvel do seu site. Empurrar e puxar são feitos nas telas maiores.

• (Desktop) Portas de visualização maiores são empurradas e puxadas.
• (Móvel) Portas de exibição menores são renderizadas em ordem 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>

Porta de visualização> = sm

|A|B|C|

Porta de visualização <sm

|B|
|A|
|C|

EDIT: ABAIXO É A RESPOSTA PARA v4.0

Com a v4, vem o flexbox e outras alterações no sistema de grade e as classes push \ pull foram removidas em favor do uso de pedidos do flexbox.

• Use .order-*classes para controlar a ordem visual (onde * = 1 a 12)
• Isso também pode ser específico do nível da grade .order-md-*
• Também .order-first(-1) e .order-last(13) estão disponíveis

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

Puxe "puxa" a div para a esquerda do navegador e e Empurre "empurra" a div para longe da esquerda do navegador.

Gostar:

Então, basicamente, em um layout de 3 colunas de qualquer página da web, o "Corpo principal" aparece no "Centro" e, na exibição "Celular", o "Corpo principal" aparece no "Topo" da página. Isso é principalmente desejado por todos com layout de 3 colunas.

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

Você pode vê-lo aqui: http://jsfiddle.net/DrGeneral/BxaNN/1/

Espero que ajude

Equívoco Um equívoco comum com a ordenação de colunas é que eu deveria (ou poderia) fazer push e pull em dispositivos móveis e que as visualizações da área de trabalho devem renderizar na ordem natural da marcação. Isto está errado.

O Reality Bootstrap é um primeiro framework móvel. Isso significa que a ordem das colunas na sua marcação HTML deve representar a ordem em que você deseja que elas sejam exibidas em dispositivos móveis. Isso significa que o envio e a retirada são feitos nas visualizações maiores da área de trabalho. não na exibição de dispositivos móveis.

Brandon Schmalz - Desenvolvedor da Web Full Stack Veja aqui a descrição completa

Eu apenas senti que adicionaria meus US $ 0,2 a essas 2 boas respostas. Tive um caso em que tive que mover a última coluna até o topo em uma situação de três colunas.

[ABC]

para

[C]

[UMA]

[B]

A classe do Boostrap .col-xx-push-Xnão faz mais nada, mas empurra uma coluna para a direita, left: XX%; então tudo o que você precisa fazer para empurrar uma coluna para a direita é adicionar o número de pseudo-colunas que ficam à esquerda.

Nesse caso:

• duas colunas ( col-md-5e col-md-3) vão para a esquerda, cada uma com o valor da que está indo para a direita;

• um ( col-md-4) está indo para a direita pela soma dos dois primeiros indo para a esquerda (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>

Se você precisar organizar dados em colunas de 1/2/4, dependendo do tamanho da janela de visualização, pressionar e puxar pode não ser uma opção. Não importa como você solicita seus itens em primeiro lugar, um dos tamanhos pode fornecer um pedido errado.

Uma solução nesse caso é usar linhas e colunas aninhadas sem nenhuma classe push ou pull.

Exemplo

No XS você quer ...

A
B
C
D
E
F
G
H

Na SM você quer ...

A   E
B   F
C   G
D   H

No MD e acima, você quer ...

A   C   E   G
B   D   F   H

Solução

Use elementos filho aninhados de duas colunas em um elemento pai de duas colunas circundante:

Aqui está um trecho de trabalho:

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

Outra beleza dessa solução é que os itens aparecem no código em sua ordem natural (A, B, C, ... H) e não precisam ser embaralhados, o que é bom para a geração do CMS.