Ordenar columnas a través de Bootstrap4


80

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.



col-xx-push- y col-xx-pull- son lo mismo que bootstrap 3. ¿Quiere la cuadrícula para 'md' y arriba 1-2, otra fila 3 y para 'sm' y debajo 1-3-2 ?
tmg

Respuestas:


139

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): 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: 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+


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

ACB ABC


@Alireza: las order-*clases no se pueden usar varias veces. Asi es como funciona. De los documentos .. "Estas clases responden, por lo que puede establecer el orden por punto de interrupción (por ejemplo, .order-1.order-md-2). Incluye soporte para 1 a 12 en los cinco niveles de cuadrícula".
Zim

@Zim ¿Entonces las order-2 order-md-12clases no se pueden usar juntas?
Alireza

No, se pueden usar juntos.
Zim

@Zim order-md-1 order-sm-2y order-1 order-sm-2no trabajes . Lo estoy haciendo manualmente
Alireza

Funcionan si está utilizando la versión indicada anteriormente codeply.com/go/23VFxwWTdP . Además, no sé qué está tratando de lograr, que probablemente sea diferente a la pregunta original a la que se aplica mi respuesta. Recuerde que las columnas son relativas entre sí en la misma fila.
Zim

22

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


No pude hacer un pedido con clases de arranque solo para dispositivos móviles. Esto funcionó, gracias
Xavier Ojeda Aguilar

3

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>

2

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.


Ops ... cometí un error en el código de estilo: X Inténtalo ahora. Y si no funciona, intente agregar! Important to float.
Marek Kus

1
Es lo mismo. He trabajado con la clase .pull-xs-right de Bootsrap 4.
Cray

-1

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.


-4

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


2
Funcionaría, pero es una duplicación de datos innecesaria. Puede hacerlo con la manipulación de float parametr (y probablemente de otras formas también).
Marek Kus
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.