¿Cómo puedo reordenar mis divs usando solo CSS?

Dada una plantilla en la que el HTML no se puede modificar debido a otros requisitos, ¿cómo es posible mostrar (reorganizar) un divencima de otro divcuando no están en ese orden en el HTML? Ambas divcontienen datos que varían en altura y ancho.

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

Con suerte, es obvio que el resultado deseado es:

Content to be above in this situation
Content to be below in this situation
Other elements

Cuando se fijan las dimensiones, es fácil colocarlas donde sea necesario, pero necesito algunas ideas para cuando el contenido es variable. En aras de este escenario, solo considere que el ancho sea del 100% en ambos.

Estoy buscando específicamente una solución solo para CSS (y probablemente tenga que encontrarme con otras soluciones si eso no funciona).

Hay otros elementos que siguen a esto. Se mencionó una buena sugerencia dado el escenario limitado que demostré, dado que podría ser la mejor respuesta, pero también estoy buscando asegurarme de que los elementos que siguen no se vean afectados.

Esta solución usa solo CSS y funciona con contenido variable

#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { display: table-header-group; }

Una solución solo para CSS (funciona para IE10 + ): use la orderpropiedad de Flexbox :

Demostración: http://jsfiddle.net/hqya7q6o/596/

#flex { display: flex; flex-direction: column; }
#a { order: 2; }
#b { order: 1; }
#c { order: 3; }

<div id="flex">
   <div id="a">A</div>
   <div id="b">B</div>
   <div id="c">C</div>
</div>

Más información: https://developer.mozilla.org/en-US/docs/Web/CSS/order

Como otros han dicho, esto no es algo que quieras hacer en CSS. Puede evitarlo con un posicionamiento absoluto y márgenes extraños, pero no es una solución sólida. La mejor opción en su caso sería recurrir a javascript. En jQuery, esta es una tarea muy simple:

$('#secondDiv').insertBefore('#firstDiv');

o más genéricamente:

$('.swapMe').each(function(i, el) {
    $(el).insertBefore($(el).prev());
});

Esto se puede hacer usando Flexbox.

Cree un contenedor que aplique ambas pantallas: flex y flex-flow: column-reverse .

/* -- Where the Magic Happens -- */

.container {
  
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;

}


/* -- Styling Only -- */

.container > div {
  background: red;
  color: white;
  padding: 10px;
}

.container > div:last-of-type {
  background: blue;
}

<div class="container">
  
  <div class="first">

     first

  </div>
  
  <div class="second">

    second

  </div>
  
</div>

Fuentes:

• https://css-tricks.com/using-flexbox/
• https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow#Browser_compatibility

No hay absolutamente ninguna manera de lograr lo que desea a través de CSS solo mientras se admiten agentes de usuario pre-flexbox ( principalmente IE antiguo ), a menos que :

1. Conoce la altura exacta representada de cada elemento (si es así, puede posicionar absolutamente el contenido). Si se trata de contenido generado dinámicamente, no tiene suerte.
2. Sabes el número exacto de estos elementos que habrá. Nuevamente, si necesita hacer esto para varios fragmentos de contenido que se generan dinámicamente, no tiene suerte, especialmente si hay más de tres o más.

Si lo anterior es cierto, puede hacer lo que quiera colocando absolutamente los elementos:

#wrapper { position: relative; }
#firstDiv { position: absolute; height: 100px; top: 110px; }
#secondDiv { position: absolute; height: 100px; top: 0; }

Una vez más, si no conoce la altura deseada para al menos #firstDiv, no hay forma de que pueda hacer lo que quiera a través de CSS solo. Si alguno de estos contenidos es dinámico, tendrá que usar javascript.

Aquí hay una solución:

<style>
#firstDiv {
    position:absolute; top:100%;
}
#wrapper {
    position:relative; 
}

Pero sospecho que tienes algo de contenido que sigue al contenedor ...

Con el módulo de diseño CSS3 flexbox, puede ordenar divs.

#wrapper {
  display: flex;
  flex-direction: column;
}
#firstDiv {
  order: 2;
}

<div id="wrapper">
  <div id="firstDiv">
    Content1
  </div>
  <div id="secondDiv">
    Content2
  </div>
</div>

Si sabe o puede imponer el tamaño del elemento que debe ser superior, puede usar

position : absolute;

En tu css y dale a los divs su posición.

de lo contrario, javascript parece ser el único camino a seguir:

fd = document.getElementById( 'firstDiv' );
sd = document.getElementById( 'secondDiv' );
fd.parentNode.removeChild( fd );
sd.parentNode.insertAfter( fd, sd );

o algo similar.

editar: acabo de encontrar esto que podría ser útil: w3 document css3 move-to

Los márgenes superiores negativos pueden lograr este efecto, pero tendrían que personalizarse para cada página. Por ejemplo, este marcado ...

<div class="product">
<h2>Greatest Product Ever</h2>
<p class="desc">This paragraph appears in the source code directly after the heading and will appear in the search results.</p>
<p class="sidenote">Note: This information appears in HTML after the product description appearing below.</p>
</div>

... y este CSS ...

.product { width: 400px; }
.desc { margin-top: 5em; }
.sidenote { margin-top: -7em; }

... te permitiría tirar del segundo párrafo sobre el primero.

Por supuesto, tendrá que ajustar manualmente su CSS para diferentes longitudes de descripción para que el párrafo de introducción salte la cantidad adecuada, pero si tiene un control limitado sobre las otras partes y control total sobre el marcado y CSS, esta podría ser una opción .

Bueno, con un poco de posicionamiento absoluto y algunos ajustes de margen dudosos, puedo acercarme, pero no es perfecto ni bonito:

#wrapper { position: relative; margin-top: 4em; }
#firstDiv { position: absolute; top: 0; width: 100%; }
#secondDiv { position: absolute; bottom: 0; width: 100%; }

El "margin-top: 4em" es el bit particularmente desagradable: este margen debe ajustarse de acuerdo con la cantidad de contenido en firstDiv. Dependiendo de sus requisitos exactos, esto puede ser posible, pero de todos modos espero que alguien pueda construir sobre esto para una solución sólida.

El comentario de Eric sobre JavaScript probablemente debería seguirse.

¡Esto se puede hacer solo con CSS!

Por favor revise mi respuesta a esta pregunta similar:

https://stackoverflow.com/a/25462829/1077230

No quiero publicar mi respuesta dos veces, pero en resumen, el padre debe convertirse en un elemento flexbox. P.ej:

(solo usando el prefijo de proveedor de webkit aquí).

#main {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

Luego, intercambie divs indicando su orden con:

#main > div#one{
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
    overflow:visible;
}

#main > div#two{
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}

En tu CSS, flota el primer div por izquierda o derecha. Flota el segundo div por izquierda o derecha igual que el primero. Aplicar clear: lefto rightlo mismo que los dos divs anteriores para el segundo div.

Por ejemplo:

#firstDiv {
    float: left;
}

#secondDiv {
    float: left;
    clear: left;
}

Si solo usa css, puede usar flex.

.price {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-direction: row-reverse; //revert horizontally
    //flex-direction: column-reverse; revert vertically
}

<div class="price">
      <div>first block</div>
      <div>second block</div>
</div>

Estaba buscando una manera de cambiar el orden de los divs solo para la versión móvil para poder diseñarlo bien. Gracias a la respuesta de Nickf, pude hacer este código que funcionó bien para lo que quería, así que pensé en compartirlo con ustedes:

//  changing the order of the sidebar so it goes after the content for mobile versions
jQuery(window).resize(function(){
    if ( jQuery(window).width() < 480 )
    {
        jQuery('#main-content').insertBefore('#sidebar');
    }
    if ( jQuery(window).width() > 480 )
    {
        jQuery('#sidebar').insertBefore('#main-content');
    }
    jQuery(window).height(); // New height
    jQuery(window).width(); // New width
});

Una solución con un soporte de navegador más grande que el flexbox (funciona en IE≥9):

#wrapper {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}
#wrapper > * {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

A diferencia de la display: table;solución, esta solución funciona cuando .wrappertiene cualquier cantidad de niños.

Simplemente use flex para el div padre especificando display: flexy flex-direction : column. Luego use el orden para determinar cuál de los div hijos es el primero

CSS realmente no debería usarse para reestructurar el backend HTML. Sin embargo, es posible si conoce la altura de ambos elementos involucrados y se siente hackear. Además, la selección de texto estará en mal estado cuando vaya entre los divs, pero eso es porque el orden HTML y CSS son opuestos.

#firstDiv { position: relative; top: YYYpx; height: XXXpx; }
#secondDiv { position: relative; top: -XXXpx; height: YYYpx; }

Donde XXX e YYY son las alturas de firstDiv y secondDiv respectivamente. Esto funcionará con elementos finales, a diferencia de la respuesta principal.

Tengo un código mucho mejor, hecho por mí, es tan grande, solo para mostrar ambas cosas ... crear una tabla 4x4 y alinear verticalmente más de una celda.

No utiliza ningún hack de IE, no vertical-align: middle; en absoluto...

No se utiliza para centrar verticalmente display-table, display: table-rom; display: table-cell;

Utiliza el truco de un contenedor que tiene dos divs, uno oculto (la posición no es la correcta pero hace que el padre tenga el tamaño variable correcto), uno visible justo después del oculto pero con la parte superior: -50%; entonces es el motor para corregir la posición.

Ver clases div que hacen el truco: BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible

Perdón por usar el español en los nombres de las clases (es porque hablo español y esto es tan complicado que si uso el inglés me pierdo).

El código completo:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en" />
<meta name="language" content="en" />
<title>Vertical Centering in CSS2 - Example (IE, FF & Chrome tested) - This is so tricky!!!</title>
<style type="text/css">
 html,body{
  margin:0px;
  padding:0px;
  width:100%;
  height:100%;
 }
 div.BloqueTipoTabla{
  display:table;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoFila_AltoAjustadoAlContenido{
  display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:auto;
 }
 div.BloqueTipoFila_AltoRestante{
  display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoCelda_AjustadoAlContenido{
  display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:auto;
 }
 div.BloqueTipoCelda_RestanteAncho{
  display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:auto;
 }
 div.BloqueTipoCelda_RestanteAlto{
  display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:100%;
 }
 div.BloqueTipoCelda_RestanteAnchoAlto{
  display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoContenedor{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:100%;position:relative;
 }
 div.BloqueTipoContenedor_VerticalmenteCentrado{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;position:relative;top:50%;
 }
 div.BloqueTipoContenido_VerticalmenteCentrado_Oculto{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:hidden;position:relative;top:50%;
 }
 div.BloqueTipoContenido_VerticalmenteCentrado_Visible{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:visible;position:absolute;top:-50%;
 }
</style>
</head>
<body>
<h1>Vertical Centering in CSS2 - Example<br />(IE, FF & Chrome tested)<br />This is so tricky!!!</h1>
<div class="BloqueTipoTabla" style="margin:0px 0px 0px 25px;width:75%;height:66%;border:1px solid blue;">
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [1,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,4]
  </div>
 </div>
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [2,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,4]
  </div>
</div>
 <div class="BloqueTipoFila_AltoRestante">
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
     The cell [3,1]
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     Now&nbsp;is&nbsp;the&nbsp;highest&nbsp;one
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
     The cell [3,1]
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     Now&nbsp;is&nbsp;the&nbsp;highest&nbsp;one
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This&nbsp;is<br />cell&nbsp;[3,2]
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This&nbsp;is<br />cell&nbsp;[3,2]
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAnchoAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This is cell [3,3]
      <br/>
      It is duplicated on source to make the trick to know its variable height
      <br />
      First copy is hidden and second copy is visible
      <br/>
      Other cells of this row are not correctly aligned only on IE!!!
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This is cell [3,3]
      <br/>
      It is duplicated on source to make the trick to know its variable height
      <br />
      First copy is hidden and second copy is visible
      <br/>
      Other cells of this row are not correctly aligned only on IE!!!
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This&nbsp;other is<br />the cell&nbsp;[3,4]
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This&nbsp;other is<br />the cell&nbsp;[3,4]
     </div>
    </div>
   </div>
  </div>
 </div>
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [4,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,4]
  </div>
 </div>
</div>
</body>
</html>

Un poco tarde para la fiesta, pero también puedes hacer esto:

<div style="height: 500px; width: 500px;">

<div class="bottom" style="height: 250px; width: 500px; background: red; margin-top: 250px;"></div>

<div class="top" style="height: 250px; width: 500px; background: blue; margin-top: -500px;"></div>

O establezca una posición absoluta para el elemento y trabaje fuera de los márgenes declarándolos desde el borde de la página en lugar del borde del objeto. Utilice% como más adecuado para otros tamaños de pantalla, etc. Así es como superé el problema ... Gracias, espero que sea lo que estás buscando ...

Para la solución CSS Only 1. La altura del contenedor debe ser fija o la altura del segundo div debe ser fija

.move-wrap {
    display: table;
    table-layout: fixed; // prevent some responsive bugs
    width: 100%; // set a width if u like
    /* TODO: js-fallback IE7 if u like ms */
}

.move-down {
    display: table-footer-group;
}

.move-up {
    display: table-header-group;
}

Es fácil con CSS, solo use display:blockyz-index propiedad

Aquí hay un ejemplo:

HTML:

<body>
    <div class="wrapper">

        <div class="header">
            header
        </div>

        <div class="content">
            content
        </div>
    </div>
</body>

CSS:

.wrapper
{
    [...]
}

.header
{
    [...]
    z-index:9001;
    display:block;
    [...]
}

.content
{
    [...]
    z-index:9000;
    [...]
}

Editar: Es bueno establecer alguna background-coloral div-sver las cosas correctamente.

Tengo una manera simple de hacer esto.

<!--  HTML  -->

<div class="wrapper">

    <div class="sm-hide">This content hides when at your layouts chosen breaking point.</div>

    <div>Content that stays in place</div>

    <div class="sm-show">This content is set to show at your layouts chosen breaking point.</div>

</div>

<!--  CSS  -->

    .sm-hide {display:block;}
    .sm-show {display:none;}

@media (max-width:598px) {
    .sm-hide {display:none;}
    .sm-show {display:block;}
}