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

En utilisant uniquement les CSS :

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

<div id="blockContainer">
  <div id="blockA">Block A</div>
  <div id="blockB">Block B</div>
  <div id="blockC">Block C</div>
</div>

Answer 2

En supposant que rien ne les suive

Si ces deux div sont les éléments principaux de votre mise en page et que rien ne les suit dans le code html, il existe une solution HMTL/CSS pure qui permet d'éviter les erreurs. prend l'ordre normal montré dans ce violon et est capable de retournez-le verticalement comme indiqué dans cette astuce. en utilisant une enveloppe supplémentaire div comme ça :

HTML

<div class="wrapper flipit">
   <div id="first_div">first div</div>
   <div id="second_div">second div</div>
</div>

CSS

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

Cela ne fonctionnerait pas si les éléments suivent ces div's, car ce test illustre le problème si les éléments suivants ne sont pas enveloppés (ils sont recouverts par #first_div ), et ce petit jeu illustre le problème si les éléments suivants sont également enveloppés (le #first_div change de position avec les deux le site #second_div et les éléments suivants ). C'est pourquoi, en fonction de votre cas d'utilisation, cette méthode peut ou non fonctionner.

Pour un schéma de mise en page global, où tous les autres éléments existent à l'intérieur des deux div's, cela peut fonctionner. Pour d'autres scénarios, ce ne sera pas le cas.

Answer 3

En supposant que les deux éléments ont une largeur de 50%, voici ce que j'ai utilisé :

css :

  .parent {
    width: 100%;
    display: flex;
  }  
  .child-1 {
    width: 50%;
    margin-right: -50%;
    margin-left: 50%;
    background: #ff0;
  }
  .child-2 {
    width: 50%;
    margin-right: 50%;
    margin-left: -50%;
    background: #0f0;
  }

html :

<div class="parent">
  <div class="child-1">child1</div>
  <div class="child-2">child2</div>
</div>

exemple : https://jsfiddle.net/gzveri/o6umhj53/

En fait, cette approche fonctionne pour deux éléments proches dans une longue liste d'éléments. Par exemple, j'ai une longue liste d'éléments avec 2 éléments par ligne et je veux que chaque troisième et quatrième élément de la liste soit échangé, afin de rendre les éléments dans un style d'échecs, alors j'utilise ces règles :

  .parent > div:nth-child(4n+3) {
    margin-right: -50%;
    margin-left: 50%;
  }
  .parent > div:nth-child(4n+4) {
    margin-right: 50%;
    margin-left: -50%;
  }

Answer 4

Hier, j'ai rencontré le même problème. Les grilles ont bien fonctionné dans mon cas :

.content-body {
    display: grid;
    grid-template-areas: " left right ";
    grid-template-columns: 1fr 1fr;
}
.first_div {
    grid-area: right;
}
.second {
    grid-area: left;
}

Answer 5

Vous n'avez pas besoin de quelque chose d'extraordinaire. Faites une copie de votre deuxième div, et placez-la au dessus. Comme ceci

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

Donnez à la seconde_div_copy display : none si vous voulez que la première div apparaisse en haut. Donnez à la seconde_div_copy display : block, et à la seconde_div display : none lorsque vous voulez que la seconde div apparaisse en haut.

C'est vraiment aussi simple que cela. Ou est-ce que quelque chose m'échappe ?