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

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.

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|

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.

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

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

O código abaixo funciona para mim

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

Agora isso é feito (no Bootstrap v4) adicionando classes de ordem #.

Consulte https://getbootstrap.com/docs/4.1/migration/#grid-system-1

Como isso:

<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>

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.

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>

Eu usei:

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

No Bootstrap V4 (lançado em 18 de janeiro de 2018), você pode usar as classes de reordenação. Informações aqui na guia Reordenar.

https://getbootstrap.com/docs/4.0/layout/grid/

O Bootstrap 4 inclui classes para flex. Consulte: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/

<div class="row flex-column-reverse flex-md-row">
    <div class="col-sm-10">
        Col 1
    </div>
    <div class="col-sm-2">
       Col 2
    </div>
</div>