Utilisez CSS pour réorganiser les DIV

Question

Étant donné un modèle où le HTML ne peut pas être modifié en raison d'autres conditions, comment est-il possible d'afficher (réorganiser) div au-dessus de l'autre div quand ils ne sont pas dans l'ordre dans le code HTML? Les deux divs contiennent des données qui varient en hauteur et en largeur.

HTML:

<div id="wrapper">
    <div id="firstDiv">

Contenu ci-dessous dans cette situation
    </div>
    <div id="secondDiv">
Contenu ci-dessus dans cette situation
    </div>
</div>
D'autres éléments

Il est évident que le résultat souhaité est:

Contenu ci-dessus dans ce situation
Contenu ci-dessous dans cette situation
D'autres éléments

Lorsque les dimensions sont fixes, il est facile de les positionner là où nécessaire, mais j'ai besoin de quelques idées pour quand le contenu est variable. Pour l'amour de ce scénario, s'il vous plaît examiner la largeur à 100% sur les deux.

Edit: UN CSS solution est la meilleure solution. Merci pour le Javascript options mentionnées. Sans se faire trop bavard à propos de quoi, ni pourquoi (ou qui) ... je suis spécifiquement à la recherche d'un CSS seule solution (et il va probablement être rencontré avec d'autres solutions si ce n'est pas dehors).

Un de plus ... il y a d'autres éléments à la suite de cela. Une bonne suggestion a été mentionné, étant donné le peu de scénario je l'ai démontré, vu qu'il pourrait être la meilleure réponse, mais je suis à la recherche d'aussi assurez-vous que les éléments suivants, ce ne sont pas affectées.

Answer 1

Cette solution utilise uniquement CSS et fonctionne avec un contenu variable

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

Answer 2

Comme d'autres l'ont déjà dit, ce n'est pas quelque chose que vous voulez faire en CSS. Vous pouvez le manipuler avec un positionnement absolu et des marges étranges, mais ce n’est pas une solution robuste. La meilleure option dans votre cas serait de passer au javascript. Dans jQuery, c'est une tâche très simple:

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

ou plus génériquement:

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

Answer 3

Cela peut être fait en utilisant Flexbox maintenant. Essentiellement, vous devez avoir un conteneur qui s’applique à l’affichage : flex et ensuite il suffit d’appliquer une propriété de flex-flux de « colonne-inversion » et il va faire exactement ce que vous décrivez.

http://codepen.IO/BlakePetersen/PEN/lCuJF

Answer 4

Il n'y a absolument aucun moyen d'obtenir ce que vous voulez grâce à CSS seul -- à moins que:

1. Vous savez exactement rendu de la hauteur de chaque élément (si oui, vous pouvez tout à fait la position du contenu). Si vous faites affaire avec un contenu généré dynamiquement, vous êtes hors de la chance.
2. Vous connaissez le nombre exact de ces éléments, il y aura. Encore une fois, si vous avez besoin de faire cela pour plusieurs morceaux de contenu qui sont générées dynamiquement, vous êtes hors de la chance.

Si ce qui précède est vrai, alors vous pouvez faire ce que vous voulez par absolument positionnement des éléments --

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

Encore une fois, si vous ne connaissez pas la hauteur veux pour au moins #firstDiv, il n'y a aucun moyen que vous pouvez faire ce que vous voulez via CSS seul. Si ce contenu est dynamique, vous devrez utiliser le javascript.

Answer 5

Voici une solution :

Mais je soupçonne que vous avez du contenu qui suit la div. de wrapper...