css - Bootstrap 4, ¿cómo invertir el orden de las columnas?

bootstrap-4

Question

Tengo este escenario simple:

<div class="row">
    <div class="col-md-12 col-lg-6 col-xl-7">A</div>
    <div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>

básicamente si md

A
B

Me gustaría, si md

B
A

He probado muchas variantes que se encuentran en la web, como flex-first y otras cosas ... parece que no funciona.

¿Algunas ideas?

Answer 1

La solución más fácil será:

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

Answer 2

Si desea cambiar el orden en md y tamaños más grandes, puede usar order-md- , esto lo proporciona bootstrap . Parece que, si desea cambiar el orden solo en el tamaño md , tendrá que definir el orden normal en un Fiddle tamaño más grande

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-12 order-md-2">A</div>
  <div class="col-md-12 order-md-1">B</div>
</div>

Answer 3

También es posible usar las clases flex- helper para resolver este problema. Esta solución le permite invertir el orden sin el recuento de pedidos en las columnas.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row flex-column-reverse flex-lg-row">
  <div class="col-md-12 col-lg-6 col-xl-7">A</div>
  <div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>

La flex-direction ahora se invierte por defecto (md) y se anulará en el punto de corte lg.