Cambiar posición DIV con CSS solamente

Estoy intentando cambiar dos ubicaciones de div s para un diseño receptivo (el sitio se ve diferente según el ancho del navegador / bueno para el móvil).

En este momento tengo algo como esto:

 

Pero, ¿sería posible cambiar sus ubicaciones para que parezca que second_div es el primero, solo con CSS? El HTML permanece igual. Intenté usar carrozas y cosas, pero parece que no funciona como quiero. No quiero usar el posicionamiento absoluto porque las alturas de los div están siempre cambiando. ¿Hay alguna solución, o simplemente no hay forma de hacer esto?

Alguien me ha vinculado esto: ¿Cuál es la mejor manera de mover un elemento que está en la parte superior hacia abajo en el diseño Responsive .

La solución en eso funcionó perfectamente. Aunque no es compatible con el viejo 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 flotar para mí, porque los necesitaba astackdos uno encima del otro y tenía alrededor de cinco divs diferentes que tuve que intercambiar alrededor de la posición de.

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 al mismo tiempo que 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 
1
2
3
//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 pone 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 busca intercambiar algunos elementos para un diseño móvil, por ejemplo, no descarte esta técnica.

Puede ver una demostración en vivo en el 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 se ocultaba. Intenté algunos otros pasos que forzaron el contenido para astackr uno encima del otro, y finalmente probé la siguiente solución que me dio el efecto deseado (cambiar el orden de visualización de contenido en las pantallas móviles), sin errores de contenido astackdo u oculto:

 .container { display:flex; flex-direction: column-reverse; } .section1, .section2 { height: auto; } 

Asumiendo que nada los sigue

Si estos dos elementos div son básicamente tus principales elementos de diseño, y nada los sigue en el html, entonces hay una solución HMTL / CSS pura que toma el orden normal que se muestra en este violín y puede voltearse verticalmente como se muestra en este violín. usando un div adicional de envoltura así:

HTML

 
first div
second div

CSS

 .flipit { position: relative; } .flipit #first_div { position: absolute; top: 100%; width: 100%; } 

Esto no funcionaría si los elementos siguen estos div, ya que este violín ilustra el problema si los siguientes elementos no están #first_div (se superponen con #first_div ), y este violín ilustra el problema si los siguientes elementos también están #first_div (los cambios #first_div posición con el #second_div y los siguientes elementos ). Es por eso que, dependiendo de su caso de uso, este método puede funcionar o no.

Para un esquema de diseño general, donde todos los demás elementos existen dentro de los dos div, puede funcionar. Para otros escenarios, no lo hará.

Usando CSS solamente:

 #blockContainer { display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; } #blockA { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; box-ordinal-group: 2; } #blockB { -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; box-ordinal-group: 3; 

}

 
Block A
Block B
Block C

http://jsfiddle.net/thirtydot/hLUHL/

Como tenía varios elementos que seguían los dos elementos que quería cambiar, las respuestas ya publicadas no me funcionaron. Lo siguiente sí funcionó:

HTML

 
first div
second div

CSS

 .flipit { position: relative; } .flipit #first_div { position: relative; top: 100px; } .flipit #second_div { position: relative; bottom: 100px; } 

En algunos casos, puede usar el order propiedad de flex-box .

Muy simple:

 .flex-item { order: 2; } 

Ver: https://css-tricks.com/almanac/properties/o/order/