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

En la vista móvil quiero tener la siguiente salida:

1-3-2

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

2018: revisando esta pregunta con la última versión de Bootstrap 4.

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

Las clases de empujar y tirar de Bootstrap 4 son ahora push-{viewport}-{units}y se ha eliminado pull-{viewport}-{units}el xs-infijo. Para obtener el diseño 1-3-2 deseado en mobile / xs sería: Bootstrap 4 push pull demo (esto solo funciona antes de 4.0 beta)

Bootstrap 4.1+

Dado que Bootstrap 4 es flexbox, es fácil cambiar el orden de las columnas. Los cols se pueden ordenar de order-1a order-12, de manera receptiva 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):

Móvil (pantallas más pequeñas):

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: Bootstrap 4.1 Cambiar orden con Flexbox Direction

Demostración de demostraciones de versiones anteriores - demo alpha 6
- beta (3)

Ver más demostraciones de pedidos de Bootstrap 4.1+

ACB ABC

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 CodePen: https://codepen.io/preston206/pen/EwrXqm

incluso esto funcionará:

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

Estoy usando Bootstrap 3, así que no sé si hay una manera más fácil de hacerlo Bootstrap 4, pero este CSS debería funcionar para usted:

.pull-right-xs {
    float: right;
}

@media (min-width: 768px) {
   .pull-right-xs {
      float: left;
   }
}

... y agregue clase a la segunda columna:

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

EDITAR:

Ohh ... parece que lo que escribí arriba es exactamente un. pull-xs-right class en Bootstrap 4: X Simplemente agréguelo a la segunda columna y debería funcionar perfectamente.

Dado que el ordenamiento de columnas no funciona en Bootstrap 4 beta como se describe en el código provisto en la respuesta revisada anterior, necesitaría usar lo siguiente (como se indica en la demostración de pedido de Codeply 4 Flexbox - enlaces alfa / beta que se proporcionaron en la respuesta).

<div class="container">
<div class="row">
    <div class="col-3 col-md-6">
        <div class="card card-block">1</div>
    </div>
    <div class="col-6 col-md-12  flex-md-last">
        <div class="card card-block">3</div>
    </div>
    <div class="col-3 col-md-6 ">
        <div class="card card-block">2</div>
    </div>
</div>

Sin embargo, tenga en cuenta que la "demostración de pedido de Flexbox - beta" va a una base de código alfa, y cambiar la base de código a Beta (y ejecutarla) da como resultado que los divs se muestren incorrectamente en una sola columna, pero eso parece un problema de código de fuente desde el corte y pegar el código fuera de codeply funciona como se describe.

Puede hacer dos contenedores diferentes, uno con orden móvil y ocultar en la pantalla del escritorio, otro con orden de escritorio y ocultar en la pantalla móvil