Bootstrap columna derecha en la parte superior en la vista móvil

Tengo una página Bootstrap como esta: 

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

Parece: 

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

Así que si lo miro en un dispositivo móvil, la Columna A está en la parte superior, pero quiero la B en la parte superior. Es esto posible? Lo intenté con empujar y tirar, pero no funcionó.

Author: ROMANIA_engineer, 2014-01-07
Source

8 answers

Use Ordenación de columnas para lograr esto. También vea este artículo sobre el Orden de columnas

col-md-push-6 "empujará" la columna a la derecha 6 y col-md-pull-6 "tirará" la columna a la izquierda en "md" o puertos de vista superiores. En los puertos de vista más pequeños, las columnas estarán en orden normal de nuevo.

Creo que lo que desconcierta a la gente, es que tienes que poner B por encima de A en tu HTML. Puede haber una manera diferente de hacer esto donde A puede ir por encima de B en el HTML, pero estoy no estoy seguro de cómo hacerlo...

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>

View-port > = md 

|A|B|

Puerto de vista 

|B|
|A|
 244
Author: Schmalzy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-08 14:31:17

Vale la pena señalar que si está utilizando columnas que no son iguales a 6, entonces la cantidad de empuje no será igual al tamaño de columna inicial.

Si tiene 2 columnas (A y B) y desea que la columna A sea más pequeña y a la derecha en las vistas "sm" o mayores, pero encima de una vista móvil (xs), usaría lo siguiente: 

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

De lo contrario, la alineación de las columnas aparecerá desactivada.

 72
Author: apritch,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-10 00:52:57

Dirección Flexbox

Para Bootstrap 4, aplique uno de los siguientes a su .división de fila: 

.flex-row-reverse

Para la configuración de respuesta: 

.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse
 18
Author: salmanhijazi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-27 09:01:16

El siguiente código funciona para mí 

.row {
    display: flex;
    flex-direction: column-reverse;
}
 3
Author: Sword I,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-08 09:16:51

He utilizado: 

.row {
   display: flex;
   flex-direction: row-reverse;
}
 1
Author: Eric Conner,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-14 00:23:29

Esto se hace ahora (en Bootstrap v4) agregando clases order -#.

Véase https://getbootstrap.com/docs/4.1/migration/#grid-system-1

Así: 

<div classname='col-md-8 order-2`>...</div>
<div classname='col-md-4 order-1`>...</div>
 1
Author: Onno Faber,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-17 01:37:57

En Bootstrap V4 (Lanzado el 18 de enero de 2018) Puede usar Clases de Reordenamiento. Información aquí en la pestaña Reordenamiento.

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

 0
Author: Juan Mireles II,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-21 06:16:51

En Bootstrap 4, digamos que desea tener un orden para pantallas grandes y un orden diferente para pantallas más pequeñas:

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

Puedes omitir order-1 y order-2 arriba. Solo añadido para mayor claridad. El orden predeterminado será el orden en que aparecen las columnas en el html.

Para más información https://getbootstrap.com/docs/4.1/layout/grid/#reordering

 0
Author: Abram,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-12 18:50:17