Changer la position des DIV avec CSS uniquement

Question

J'essaie d'échanger deux div pour le responsive design (le site a un aspect différent selon la largeur du navigateur/bon pour les mobiles).

Pour l'instant, j'ai quelque chose comme ça :

<div id="first_div"></div>
<div id="second_div"></div>

Mais serait-il possible d'intervertir leurs placements pour que ça donne l'impression que second_div est la première, en utilisant uniquement CSS ? Le HTML reste le même. J'ai essayé d'utiliser des flotteurs et d'autres éléments, mais cela ne semble pas fonctionner comme je le voudrais. Je ne veux pas utiliser le positionnement absolu parce que les hauteurs des éléments de la page div sont en constante évolution. Existe-t-il des solutions, ou n'y a-t-il tout simplement aucun moyen de le faire ?

Answer 1

Une solution flexbox simple utilisant le order -propriété :

.container {
  display: flex;
  flex-direction: column;
}

.first {
  order: 3;
}

.second {
  order: 2;
}

<div class="container">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
</div>