Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Cambiando orden de div según resolución en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/02/2014, 05:00
 
Fecha de Ingreso: diciembre-2009
Mensajes: 125
Antigüedad: 14 años, 3 meses
Puntos: 7
Cambiando orden de div según resolución

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
  #2 (permalink)  
Antiguo 15/02/2014, 06:11
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 7 meses
Puntos: 60
Respuesta: Cambiando orden de div según resolución

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.
  #3 (permalink)  
Antiguo 22/02/2014, 18:40
 
Fecha de Ingreso: diciembre-2009
Mensajes: 125
Antigüedad: 14 años, 3 meses
Puntos: 7
Respuesta: Cambiando orden de div según resolución

Cita:
Iniciado por Zeromm Ver Mensaje
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
  #4 (permalink)  
Antiguo 23/02/2014, 00:20
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 7 meses
Puntos: 60
Respuesta: Cambiando orden de div según resolución

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...
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #5 (permalink)  
Antiguo 25/02/2014, 11:10
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 7 meses
Puntos: 60
Respuesta: Cambiando orden de div según resolución

Puedes probar con "display: table", "enrevesando" un poco la cosa puedes llegar a lo que necesitas
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #6 (permalink)  
Antiguo 04/03/2014, 03:46
 
Fecha de Ingreso: diciembre-2009
Mensajes: 125
Antigüedad: 14 años, 3 meses
Puntos: 7
Respuesta: Cambiando orden de div según resolución

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...

Etiquetas: color, orden, resolución, según
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:19.