[SOLUCIONADO] Cambiando orden de div según resolución

[arqrym]

Buenas, quiero ordenar una misma clase repetida varias veces y que varie según la resolución de pantalla. Las clases tiene un id que la identifica por color.. es decir:

<div class="caja" id=color1></div>
<div class="caja" id=color2></div>
<div class="caja" id=color3></div>

Al cambiar la resolucion quiero que la posición caja de color 1 esté en la 3 y la 3 en la 2 y la 2 en la 1.

Con media queries es fácil, le cambio las propiedades en cada salto de resolución, pero prefiero simplemente alternarlas sin cambiar las propiedades css de cada id color.

Con un if , sacando la resolución, se podrá, pero sabéis alguna otra forma?

Gracias de antemano

[Zeromm]

lo que buscas se llama "flexbox"

Aquí tienes información completa y muy reciente, ya que lo malo que tiene es que es una propiedad que cambia muchas veces.

[arqrym]

Iniciado por Zeromm

lo que buscas se llama "flexbox"

Aquí tienes información completa y muy reciente, ya que lo malo que tiene es que es una propiedad que cambia muchas veces.

Gracias...He conseguido lo que quería, pero cuando me he dado cuenta e hice la prueba en Firefox no va...

En Chrome me va estupendamente. He estado mirando que en Firefox no funcionan las cajas en varias líneas..Alguien sabe como solucionarlo?

Estoy probando 6 cajas en dos filas de 3 y no soy capaz de hacerlo funcionar en Firefox. Algún truquillo para resolverlo?? o no es posible??

De todas formas, mi único objetivo para hacerlo así es cambiar el orden de la clase según la resolución ya sea con flex o no. Con flex lo consigo, pero tengo ese problema con Firefox, y si no es con Flex, alguna otra forma??

Gracias de antemano.
Saludos

[Zeromm]

Como te dije lo malo es que todavía es una propirdad que está "en pruebas" por decirlo de alguna manera, y mientras tanto aún no es muy buena idea usarlo...

[Zeromm]

Puedes probar con "display: table", "enrevesando" un poco la cosa puedes llegar a lo que necesitas

[arqrym]

Gracias a ambos...lo he conseguido con mediaqueries, display:none y poniendo en código el orden que quiero mostrar..

Me funciona bien en todos los navegadores..

Está solucionado..

De nuevo , gracias a ambos por la ayuda...