Ordenar columnas a través de Bootstrap4

Tengo 3 columnas que quiero ordenar de diferentes maneras en computadoras de escritorio y dispositivos móviles.

Actualmente, mi grilla se ve así:

<div class="row">
  <div class="col-xs-3 col-md-6">
    1
  </div>
  <div class="col-xs-3 col-md-6">
    2
  </div>
  <div class="col-xs-6 col-md-12">
    3
  </div>
</div>

Expandir fragmento

En la vista móvil quiero tener el siguiente resultado:

1-3-2

Desafortunadamente no entiendo cómo resolver esto con las clases .col-md-push-*y .col-md-pull-*en Bootstrap 4.

Jun 14 '16 21:06 Cray

2021 - Arranque 5

Las clases de pedidos receptivos ahora son order-first, order-lasty order-0:order-5

Manifestación

2018 - Arranque 4

Las clases de pedidos receptivos ahora son order-first, order-lasty order-0:order-12

Las clases Bootstrap 4 **push** **pull** ahora son `push-{viewport}-{units}` y `pull-{viewport}-{units}` y se ha eliminado el infijo `xs-`. Para obtener el diseño 1-3-2 deseado en dispositivos móviles/xs sería: [Demostración push-pull de Bootstrap 4](http://www.codeply.com/go/OmrcmepbUp) (Esto solo funciona en versiones anteriores a 4.0 beta)

Arranque 4.1+

Dado que Bootstrap 4 es flexbox, es fácil cambiar el orden de las columnas. Las columnas se pueden ordenar desde order-1hasta order-12, de manera responsiva, como order-md-12 order-2(último en md, segundo en xs) en relación con el padre .row.

<div class="container">
    <div class="row">
        <div class="col-3 col-md-6">
            <div class="card card-body">1</div>
        </div>
        <div class="col-6 col-md-12 order-2 order-md-12">
            <div class="card card-body">3</div>
        </div>
        <div class="col-3 col-md-6 order-3">
            <div class="card card-body">2</div>
        </div>
    </div>
</div>

Demostración: cambiar el orden usando order-*clases

Escritorio (pantallas más grandes): ingrese la descripción de la imagen aquí

Móvil (pantallas más pequeñas): ingrese la descripción de la imagen aquí

También es posible cambiar el orden de las columnas usando las utilidades de dirección de Flexbox ...

<div class="container">
    <div class="row flex-column-reverse flex-md-row">
        <div class="col-md-8">
            2
        </div>
        <div class="col-md-4">
            1st on mobile
        </div>
    </div>
</div>

Demostración: Orden de cambio de Bootstrap 4.1 con dirección Flexbox

Demostración de versiones anteriores
- demostración alfa 6
- beta (3)

Ver más demostraciones de pedidos de Bootstrap 4.1+

Orden de columnas relacionadas
en Bootstrap 4 con push/pull y col-md-12
Bootstrap 4 cambia el orden de las columnas

ACB-ABC

Mar 28 '2017 12:03 Carol Skelly

Esto también se puede lograr con la propiedad "Orden" de CSS y una consulta de medios.

Algo como esto:

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

Enlace de CodePen: https://codepen.io/preston206/pen/EwrXqm

Oct 19 '2017 19:10 bprdev