Como posso reordenar meus divs usando apenas CSS?

Dado um modelo em que o HTML não pode ser modificado devido a outros requisitos, como é possível exibir (reorganizar) um divacima do outro divquando eles não estão nessa ordem no HTML? Ambos divs contêm dados que variam em altura e largura.

<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

Espero que seja óbvio que o resultado desejado seja:

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

Quando as dimensões são fixas, é fácil posicioná-las onde necessário, mas preciso de algumas idéias para quando o conteúdo é variável. Para esse cenário, considere apenas a largura de 100% em ambos.

Estou procurando especificamente uma solução somente CSS (e provavelmente terá que ser encontrada com outras soluções, se isso não der certo).

Existem outros elementos após isso. Uma boa sugestão foi mencionada, devido ao cenário limitado que demonstrei - já que essa pode ser a melhor resposta, mas pretendo garantir também que os elementos a seguir não sejam afetados.

Esta solução usa apenas CSS e funciona com conteúdo variável

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

Uma solução somente CSS (funciona para o IE10 + ) - use a orderpropriedade do Flexbox :

Demo: 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>

Mais informações: https://developer.mozilla.org/en-US/docs/Web/CSS/order

Como já foi dito, isso não é algo que você gostaria de fazer em CSS. Você pode falsificá-lo com posicionamento absoluto e margens estranhas, mas simplesmente não é uma solução robusta. A melhor opção no seu caso seria recorrer ao javascript. No jQuery, esta é uma tarefa muito simples:

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

ou mais genericamente:

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

Isso pode ser feito usando o Flexbox.

Crie um contêiner que aplique as duas telas: flex e flex-flow: reverse-column .

/* -- 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>

Fontes:

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

Não há absolutamente nenhuma maneira de alcançar o que você deseja apenas através do CSS, oferecendo suporte a agentes de usuário pré-flexbox ( principalmente IE antigo ) - a menos que :

1. Você sabe a altura exata renderizada de cada elemento (se houver, você pode posicionar absolutamente o conteúdo). Se você está lidando com conteúdo gerado dinamicamente, está sem sorte.
2. Você sabe o número exato desses elementos que haverá. Novamente, se você precisar fazer isso para vários trechos de conteúdo gerados dinamicamente, ficará sem sorte, especialmente se houver mais de três.

Se o exposto acima for verdadeiro, você poderá fazer o que deseja posicionando absolutamente os elementos -

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

Novamente, se você não sabe a altura desejada pelo menos #firstDiv, não há como fazer o que deseja apenas via CSS. Se algum deste conteúdo for dinâmico, você precisará usar o javascript.

Aqui está uma solução:

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

Mas suspeito que você tenha algum conteúdo que segue a div do wrapper ...

Com o módulo de layout CSS3 flexbox, você pode solicitar divs.

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

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

Se você souber ou puder impor o tamanho do elemento superior, você poderá usar

position : absolute;

Em seu css e dê aos divs a posição deles.

caso contrário, o javascript parece o único caminho a percorrer:

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

ou algo semelhante.

edit: Acabei de encontrar este que pode ser útil: w3 document css3 move-to

As margens superiores negativas podem atingir esse efeito, mas precisariam ser personalizadas para cada página. Por exemplo, essa marcação ...

<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>

... e esse CSS ...

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

... permitiria que você puxasse o segundo parágrafo acima do primeiro.

Obviamente, você precisará ajustar manualmente seu CSS para diferentes comprimentos de descrição, para que o parágrafo de introdução salte na quantidade apropriada, mas se você tiver controle limitado sobre as outras partes e controle total sobre a marcação e o CSS, isso pode ser uma opção .

Bem, com um pouco de posicionamento absoluto e algumas configurações de margem desonestas, posso me aproximar, mas não é perfeito ou bonito:

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

O "margin-top: 4em" é o bit particularmente desagradável: essa margem precisa ser ajustada de acordo com a quantidade de conteúdo no firstDiv. Dependendo dos requisitos exatos, isso pode ser possível, mas espero que alguém possa aproveitar isso para obter uma solução sólida.

O comentário de Eric sobre JavaScript provavelmente deve ser seguido.

Isso pode ser feito apenas com CSS!

Por favor, verifique minha resposta a esta pergunta semelhante:

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

Eu não quero postar minha resposta duas vezes, mas o resumo é que o pai precisa se tornar um elemento do flexbox. Por exemplo:

(apenas usando o prefixo do fornecedor do kit da web aqui.)

#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;
}

Em seguida, troque divs indicando a ordem com:

#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;
}

No seu CSS, flutue a primeira div pela esquerda ou pela direita. Flutue a segunda div à esquerda ou à direita, igual à primeira. Aplique clear: leftou righto mesmo que os dois divs acima para o segundo div.

Por exemplo:

#firstDiv {
    float: left;
}

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

Se você apenas usa css, pode usar o 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>

Eu estava procurando uma maneira de alterar as ordens dos divs apenas para a versão móvel, para que eu possa estilizá-lo com estilo. Graças à resposta do nickf, consegui criar esse código que funcionou bem para o que eu queria, então pensei em compartilhá-lo com vocês:

//  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
});

Uma solução com um suporte de navegador maior que o flexbox (funciona no 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

Ao contrário da display: table;solução, essa solução funciona quando .wrapperhá filhos.

Basta usar flex para a div pai especificando display: flexe flex-direction : column. Em seguida, use order para determinar qual div filho vem primeiro

CSS realmente não deve ser usado para reestruturar o back-end HTML. No entanto, é possível se você conhece a altura de ambos os elementos envolvidos e se sente insensato. Além disso, a seleção de texto será alterada entre as divs, mas isso ocorre porque a ordem HTML e CSS são opostas.

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

Onde XXX e AA são as alturas do firstDiv e secondDiv, respectivamente. Isso funcionará com elementos finais, ao contrário da resposta principal.

Eu tenho um código muito melhor, feito por mim, é tão grande, apenas para mostrar as duas coisas ... criar uma tabela 4x4 e alinhar verticalmente mais do que apenas uma célula.

Ele não usa nenhum hack do IE, nenhum alinhamento vertical: meio; em absoluto...

Não é usado para centralizar verticalmente display-table, display: table-rom; display: célula de tabela;

Ele usa o truque de um contêiner que possui duas divs, uma oculta (a posição não está correta, mas faz com que o pai tenha o tamanho de variável correto), uma visível logo após a oculta, mas com o topo: -50%; por isso, é o motor para corrigir a posição.

Veja as classes div que fazem o truque: BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible

Desculpe por usar o espanhol nos nomes das classes (é porque eu falo espanhol e isso é tão complicado que, se eu uso o inglês, me perco).

O 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>

Um pouco tarde para a festa, mas você também pode fazer isso:

<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>

Ou defina uma posição absoluta para o elemento e trabalhe fora das margens, declarando-as na borda da página e não na borda do objeto. Use% como mais adequado para outros tamanhos de tela ect. Isto é como eu superei a questão ... Obrigado, espero que seja o que você está procurando ...

Para a solução somente CSS 1. A altura do wrapper deve ser fixa ou a altura da segunda div deve ser fixa.

.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;
}

É fácil com css, basta usar display:blocke z-indexpropriedade

Aqui está um exemplo:

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;
    [...]
}

Edit: É bom definir alguns background-colorpara o div-spara ver as coisas corretamente.

Eu tenho uma maneira simples de fazer isso.

<!--  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;}
}