Solución:
Alguien me vinculó esto: ¿Cuál es la mejor manera de mover un elemento que está de arriba a abajo en el diseño adaptable?
La solución en eso funcionó perfectamente. Aunque no es compatible con el antiguo IE, eso no me importa, ya que estoy usando un diseño receptivo para dispositivos móviles. Y funciona para la mayoría de los navegadores móviles.
Básicamente, tuve esto:
@media (max-width: 30em) {
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
/* optional */
-webkit-box-align: start;
-moz-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.container .first_div {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.container .second_div {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
}
Esto funcionó mejor que los flotadores para mí, porque los necesitaba apilados uno encima del otro y tenía alrededor de cinco divs diferentes que tenía que cambiar de posición.
Esta pregunta ya tiene una gran respuesta, pero en el espíritu de explorar todas las posibilidades, aquí hay otra técnica para reordenar los elementos dom mientras les permite ocupar su espacio, a diferencia del método de posicionamiento absoluto.
Este método funciona en todos los navegadores modernos e IE9 + (básicamente cualquier navegador que admita display: table) tiene el inconveniente de que solo se puede usar en un máximo de 3 hermanos.
//the html
<div class="container">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
//the css
.container {
display:table;
}
.div1 {
display:table-footer-group;
}
.div2 {
display:table-header-group;
}
.div3 {
display:table-row-group;
}
Esto reordenará los elementos de 1,2,3 a 2,3,1. Básicamente, cualquier cosa con la pantalla configurada en table-header-group se colocará en la parte superior y table-footer-group en la parte inferior. Naturalmente, table-row-group coloca un elemento en el medio.
Este método es rápido con un buen soporte y requiere mucho menos CSS que el enfoque de flexbox, por lo que si solo está buscando intercambiar algunos elementos por un diseño móvil, por ejemplo, no descarte esta técnica.
Puede ver una demostración en vivo en codepen: http://codepen.io/thepixelninja/pen/eZVgLx
La respuesta aceptada funcionó para la mayoría de los navegadores, pero por alguna razón en los navegadores iOS Chrome y Safari, el contenido que debería haberse mostrado en segundo lugar estaba oculto. Probé algunos otros pasos que obligaron al contenido a apilarse uno encima del otro, y finalmente probé la siguiente solución que me dio el efecto deseado (cambiar el orden de visualización del contenido en las pantallas de dispositivos móviles), sin errores de contenido apilado u oculto:
.container {
display:flex;
flex-direction: column-reverse;
}
.section1,
.section2 {
height: auto;
}