Cambia el orden de col – * – 12 columnas en Bootstrap usando push / pull

Tengo dos columnas del mismo tamaño ( .col-xs-12 ) y cambiaría su lugar cuando el tamaño de la pantalla corresponda a la de un dispositivo móvil. Los colocaría en el orden inverso.

He leído que las directivas de arranque y extracción ayudan a lograr eso, pero ¿es posible cambiar el lugar de dos columnas del mismo tamaño con las siguientes clases?

 div.col-xs-12.col-xs-push-12 p test1 div.col-xs-12.col-xs-pull-12 p test2 

En realidad, no puede reordenar las columnas que tienen .col-*-12 mediante clases de ayuda push / pull . La sum de columnas excede las 12 columnas predeterminadas que se definen por @grid-columns .

Puede cambiar el orden de las columnas en HTML y luego usar las clases de orden en pantallas más grandes de la siguiente manera:

EJEMPLO AQUÍ

 

test2

test1

O utilice este enfoque elegante para invertir el orden de las columnas que se colocan verticalmente una debajo de la otra:

EJEMPLO AQUÍ

 @media (max-width: 767px) { .row.reorder-xs { transform: rotate(180deg); direction: rtl; /* Fix the horizontal alignment */ } .row.reorder-xs > [class*="col-"] { transform: rotate(-180deg); direction: ltr; /* Fix the horizontal alignment */ } } 

Vale la pena señalar que las transformaciones CSS también son compatibles con IE9 ; No olvide agregar prefijos de proveedor.

En Bootstrap 4 , puede cambiar el orden de las columnas de ancho completo (12 unidades) utilizando las clases de ordenamiento de flexbox.

Actualización 2017 – Bootstrap 4 alpha 6

En 3.x, solo podía empujar / arrastrar columnas hacia la izquierda o hacia la derecha (horizontalmente). Con los nuevos utilitarios de ordenamiento de Flexbox en 4.x, ahora es posible cambiar el orden de las columnas verticalmente

 
1
2 (first on xs)

http://www.codeply.com/go/7RUJORgxBK


Actualiza Bootstrap 4 Beta

Los alfa ordenados flexibles han cambiado a order- classes.

 
1
2 (first on xs)

https://www.codeply.com/go/VUjKsM3cUD

Puedes hacerlo totalmente, consulta el orden de la columna de cuadrícula de Bootstrap

Pero, por supuesto, su ejemplo no tendrá ningún efecto ya que xs-12 es una columna de ancho completo, por lo que esto solo se aplicará a los modelos donde la sum de las columnas sea 12 (o 16 si lo hace si personaliza su red Bootstrap). Vea el ejemplo de Bootstrap en esa misma página con fines ilustrativos:

 
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9

Si necesita reordenar cols para un caso receptivo como

 div.col-xs-12.col-sm-9 # this should be on the bottom for col-xs-12 p test1 div.col-xs-12.col-sm-3 # this should be on the top for col-xs-12 p test2 

podría usar una clase .pull-right e invertir el orden de las columnas.

 div.col-xs-12.col-sm-3.pull-right p test2 div.col-xs-12.col-sm-9 p test1 

entonces están en orden para col-xs-12 y aparecen correctamente para los otros puntos de corte.

En caso de que alguien venga aquí con un problema similar al mío, solo encontrar push / pull no se ajusta a tus necesidades, porque o col-xs-12 no tirará / empujará o usará más de 2 columnas hace que sea más difícil descifrar el push / extraer valores aquí es mi solución.

A continuación se muestra la solución elegante de @hashemquolami

 @media (max-width: 767px) { .row.reorder-xs { transform: rotate(180deg); direction: rtl; /* Fix the horizontal alignment */ } .row.reorder-xs > [class*="col-"] { transform: rotate(-180deg); direction: ltr; /* Fix the horizontal alignment */ } } 

Aunque este enfoque funciona bien, tengo una solución diferente:

La grilla de bootstrap funciona al flotar las columnas a la izquierda, esto puede ser fácilmente alterado con css. Observe el marcado a continuación, ya que la bonificación col-md-offset-1 se invirtió para emular 5 columnas centradas.

HTML

 
A
B
c
d
e

CSS

 @media screen and ( min-width: 992px) { .reverseOrder [class^="col-"] { float: right; } .reverseOrder .col-md-offset-1 { margin-right: 8.333333333333332%; margin-left: 0px; } } 

JSFIDDLE

Tuve el mismo problema y lo resolví de esta manera:

HTML

  

test

test

CSS

 @media (max-width: 767px){ .less-than { display: none; } .more-than { display: block !important; } }