Hace no mucho tuve este mismo problema, en este caso era para cambiar el orden en el que se mostraban los objetos en una web que al pasar a movil solo mostraba el mapa de google maps.
El código está basado en este, con las correspondientes modificaciones (sacado de stackoverflow):
Insertar CODE, HTML o PHP:
<div id="div_uno">Soy el primer div</div>
<div id="div_dos">Soy el segundo div</div>
Insertar CODE, HTML o PHP:
@media (max-width: 300px) {
.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 .div_uno {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.container .div_dos {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
}
Ten en cuenta que da igual el número de divs que tengas, sólo tienes que adaptarlo a tus layout
Lo que hacemos es que para max-width definido indicamos con order en que orden del layout vamos a mostrar los div correspondientes. Esto hace que podamos tener un layout especifico para cada resolución.
¿El problema? que no va a funcionar en Internet Explorer si es una versión antigua... pero para lo que necesitaba, que era que se viera correctamente en móviles funciona muy bien
