Coluna de inicialização direita na parte superior na visualização móvel


171

Eu tenho uma página de Bootstrap como esta:

<div class="row">
    <div class="col-md-6">
        A
    </div>
    <div class="col-md-6">
       B
    </div>
</div>

Parece:

-----
|A|B|
-----

Então, se eu olhar para ele em um dispositivo móvel, a coluna A está no topo, mas eu quero o B no topo. Isso é possível? Eu tentei com um puxão, mas não funcionou.


2
Para o Bootstrap 4, veja a resposta de salmanhijazi
schnawel007

Respostas:


268

Use a ordenação de colunas para fazer isso.

col-md-push-6"empurrará" a coluna para a direita 6 e col-md-pull-6"puxará" a coluna para a esquerda em "md" ou portas de visualização maiores. Em qualquer porta de visualização menor, as colunas estarão na ordem normal novamente.

Eu acho que o que impressiona as pessoas é que você deve colocar B acima de A no seu HTML . Pode haver uma maneira diferente de fazer isso, onde A pode ir acima de B no HTML, mas não tenho certeza de como fazê-lo ...

DEMO

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

porta de visualização> = md

|A|B|

porta de visualização <md

|B|
|A|

6
@JackTheKnife Dê uma olhada na outra resposta a esta pergunta ... você empurra ou puxa uma coluna pela largura da outra coluna.
Schmalzy

1
@ Schmalzy O yeah - outra resposta tem uma explicação melhor. Também descobriu que útil: scotch.io/tutorials/reorder-css-columns-using-bootstrap
JackTheKnife

1
Tendo problemas com três colunas, em que a ordem das pilhas deve estar no centro, esquerda, direita.
Ganso

78

Vale a pena notar que, se você estiver usando colunas que não são iguais a 6, o valor do envio não será igual ao tamanho inicial da coluna.

Se você possui 2 colunas (A e B) e deseja que a coluna A seja menor e à direita nas viewports "sm" ou superior, mas no topo de uma viewport móvel (xs), você usaria o seguinte:

<div class="row">
    <div class="col-sm-4 col-sm-push-8">A</div>
    <div class="col-sm-8 col-sm-pull-4">B</div>
</div>

Caso contrário, o alinhamento das colunas aparecerá desativado.


Como posso usar isso quando tenho offset definido<div class="col-md-4 col-md-offset-1"></div><div class="col-md-6 col-md-offset-1"></div>
Muddasir Abbas

29

Direção do Flexbox

Para o Bootstrap 4, aplique um dos seguintes à sua div .row:

.flex-row-reverse

Para configurações responsivas:

.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse

alguma idéia de como conseguir o mesmo no vuetify?
Rakibul Haq

11

No Bootstrap 4, digamos que você deseja ter um pedido para telas grandes e um pedido diferente para telas menores:

<div class="container">
  <div class="row">
    <div class="col-6 order-1 order-lg-2">
      This column will be ordered second on large to extra large screens
    </div>
    <div class="col-6 order-2 order-lg-1">
      This column will be ordered first on large to extra large screens
    </div>
  </div>
</div>

Você pode omitir order-1e order-2acima. Apenas adicionado para maior clareza. A ordem padrão será a ordem em que as colunas aparecerão no html.

Para mais informações https://getbootstrap.com/docs/4.1/layout/grid/#reordering


10

O código abaixo funciona para mim

.row {
    display: flex;
    flex-direction: column-reverse;
}


4

Eu tenho três colunas de bootstrap 4 de tamanhos diferentes. À medida que a tela fica menor, a terceira coluna fica oculta e, quando a tela fica menor ainda e os divs são empilhados, a ordem muda para que a coluna 2 fique no topo.

    <div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
        <h3>LEFT HAND SECTION</h3>
        <p>For news, links photos or comments.</p>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
        <h3>MAIN SECTION</h3>
        <p>The main content for the page.</p>
    </div>
    <div class="col-xs-12 col-md-4 d-none d-md-block order-last">
        <h3>BLANK SECTION</h3>
        <p>Will usually just be blank.</p>
    </div>

Eu espero que isso ajude. Achei difícil entender isso, mas finalmente cheguei lá com a ajuda desse tópico, mas foi um pouco imprevisível.


3

Isso funcionou para mim no Bootstrap 4:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 order-md-last">
      <%= render 'form'%>
    </div>
    <div class="col-md-8 order-md-first">
      CONTENT
    </div>
  </div>
</div>



Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.