Skip to main content

Twitter Bootstrap 3: alterar ordem de empilhamento das colunas

Você já passou por alguma situação onde foi necessário alterar a ordem de empilhamento no Bootstrap? Se não, sugiro guardar este post, pois mais cedo ou mais tarde irá precisar! rsrs

No exemplo abaixo temos uma situação onde há duas colunas onde a da esquerda tem um texto e a da direita uma imagem. Esta é a configuração comum que a maioria dos sites utilizam.

Lorem ipsum dolor sit amet.

Quando o navegador é redimensionado para o tamanho médio, o texto fica no topo e a imagem logo abaixo, mas e se o que você deseja é que a imagem fique no topo ao invés do texto e que em telas maiores o texto continue a esquerda da imagem? Para isso devemos inverter a ordem das nossas divs e utilizar o push e o pull do Bootstrap e é aí que a mágica acontece!

Lorem ipsum dolor sit amet.

A classe col-md-push-6 faz com que a div da imagem seja “empurrada” 6 colunas, enquanto a classe col-md-pull-6 “puxa” a div do texto.

Obs.: no exemplo acima utilizei 6 colunas para cada div, mas isso funciona com qualquer tamanho de coluna do Bootstrap.

Murilo Medeiros

Murilo Medeiros, nascido e criado em Piracicaba/SP. Programador, apaixonado por tecnologia. Desenvolvedor Web desde 2012.

6 thoughts to “Twitter Bootstrap 3: alterar ordem de empilhamento das colunas”

  1. Mú, a frase “Se não, sugiro guardar este post, pois mais cedo ou mais tarde irá precisar!” foi uma profecia! Hahahahaha… Tive que usar hoje aqui, mano.

    Obrigado pela dica!

  2. Se tenho a DIV1 (md-4) / DIV2 (md-4) / DIV3 (md-4) -> Na horizontal
    No mobile, teria que ficar assim:
    DIV1 (xs-6) / DIV3 (xs-6)
    DIV2 (xs12)

    Como ficaria nessa regra?
    Ou seria de outra forma?

Deixe uma resposta