css - form bootstrap

Ordenar columnas a través de Bootstrap4

Question

Tengo 3 columnas que quiero ordenar de diferentes maneras en computadoras de escritorio y dispositivos móviles. Actualmente, mi cinturón 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 el siguiente resultado:

1-3-2

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

Answer 1

Dado que el orden de columnas no funciona en Bootstrap 4 beta como se describe en el código proporcionado en la respuesta revisada anterior, deberá 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) hace que los divs se muestren incorrectamente en una sola columna, pero eso parece un problema de codeply desde el corte y pegar el código fuera de codeply funciona como se describe.

Answer 2

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

Answer 3

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 me escribieron arriba es exactamente a. clase pull-xs-right en Bootstrap 4: X Simplemente agréguelo a la segunda columna y debería funcionar perfectamente.

Answer 4

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

Answer 5

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>

Answer 6

2018 - Revisando esta pregunta con el último Bootstrap 4.

Las clases de ordenamiento receptivo ahora son order-first , order-last y order-0 - order-12

Las clases de pull-pull de Bootstrap 4 ahora son push-{viewport}-{units} y pull-{viewport}-{units} y el xs- infix ha sido eliminado. 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 desde order-1 hasta order-12 , de manera receptiva, como order-md-12 order-2 (último en md , 2nd 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: cambie el orden utilizando las clases order-*

Escritorio (pantallas más grandes):

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

También es posible cambiar el orden de las columnas utilizando 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 de Flexbox

Demos de versiones anteriores
demo - alpha 6
demo - beta (3)

Ver más demostraciones de pedidos de Bootstrap 4.1+

Relacionado:
Ordenar columnas en Bootstrap 4 con push / pull y col-md-12
Bootstrap 4 cambia el orden de las columnas

ACB ABC