Div encima de otro al achicar pantalla

leyman07 · #1 (**permalink**) 14/07/2015, 09:18

Hola, quizás la pregunta sea media floja. Pero la verdad no se me ocurre como hacerlo. He usado media queries para adaptar y dá resultado pero como haría a la inversa. Pongo el ejemplo del código:

#contenedor {
background-color:#3C6;
width:100%;
margin:auto;
}

.uno{
background-color: #f88;
width: 50%;
float: left;
}

@media (max-width: 600px) {
.uno {
background: #044;
width:100%;
}
}

.dos{
background-color: #b44;
width: 50%;
float:left;

}

@media (max-width: 600px) {
.dos {
background: #077;
width:100%;
}
}

<body>

<div id="contenedor">

<div class="uno">1</div>

<div class="dos">2</div>

</div>

</body

Al hacerlo así dá resultado, pero como haría para que al achicarlo el div 2 quede sobre el 1?

pzin · #2 (**permalink**) 14/07/2015, 09:22

La forma fácil es cambiando la estructura, poniendo en el markup primero el segundo elemento y flotándolo a la izquierda. Y luego cuando quieras que aparezca encima simplemente dejar de flotarlo.

fede5426 · #3 (**permalink**) 14/07/2015, 12:43

En mi opinion la forma mas facil es usando flexbox, aprovechando el atributo order.

Código CSS:

Ver original#contenedor {
background-color:#3C6;
width:100%;
margin:auto;
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
 
.uno{
background-color: #f88;
width: 50%;
}
 
@media (max-width: 600px) {
.uno {
background: #044;
width:100%;
order:2;
}
}
 
.dos{
background-color: #b44;
width: 50%;
}
 
@media (max-width: 600px) {
.dos {
background: #077;
width:100%;
order:1;
}
}

http://codepen.io/fede5426/pen/aOKEWR

Saludos

pzin · #4 (**permalink**) 14/07/2015, 13:14

No es fácil, es más complicado.

fede5426 · #5 (**permalink**) 14/07/2015, 18:46

Cita:

Iniciado por pzin

No es fácil, es más complicado.

Quizás en vez de decir "la forma mas fácil es..." debería haber dicho "otra forma de hacerlo es..."

Igual no es tan complicado.. solamente hay que definir al contenedor como flexible y a sus hijos darle el orden de aparición usando order.. no es cosa de otro mundo, yo prefiero hacerlo así en lugar de flotar los elementos.. opinión personal nada más

Saludos

leyman07 · #6 (**permalink**) 16/07/2015, 21:32

Cita:

Iniciado por fede5426

En mi opinion la forma mas facil es usando flexbox, aprovechando el atributo order.

Saludos

Gracias, buena opción. Saludos.