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

Quelqu'un m'a envoyé ce lien : Quelle est la meilleure façon de déplacer un élément qui se trouve en haut vers le bas dans le Responsive design ? .

Cette solution a parfaitement fonctionné. Bien qu'elle ne prenne pas en charge l'ancien IE, cela n'a pas d'importance pour moi, puisque j'utilise le responsive design pour les mobiles. Et cela fonctionne pour la plupart des navigateurs mobiles.

En gros, j'avais ça :

@media (max-width: 30em) {
  .container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  .container .first_div {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }

  .container .second_div {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
}

Cela a mieux fonctionné que les flottants pour moi, car j'avais besoin qu'ils soient empilés les uns sur les autres et j'avais environ cinq divs différents dont je devais changer la position.

Answer 2

La réponse acceptée a fonctionné pour la plupart des navigateurs, mais pour une raison quelconque, sur les navigateurs Chrome et Safari d'iOS, le contenu qui aurait dû s'afficher en second était masqué. J'ai essayé d'autres mesures qui forçaient le contenu à s'empiler les uns sur les autres, et finalement j'ai essayé la solution suivante qui m'a donné l'effet escompté (changer l'ordre d'affichage du contenu sur les écrans mobiles), sans les bugs du contenu empilé ou caché :

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

.section1,
.section2 {
  height: auto;
}

Answer 3

Cette question a déjà une excellente réponse, mais dans l'esprit d'explorer toutes les possibilités, voici une autre technique pour réorganiser les éléments du domaine tout en leur permettant d'occuper leur espace, contrairement à la méthode de positionnement absolu.

Cette méthode fonctionne dans tous les navigateurs modernes et dans IE9+ (en gros, dans tous les navigateurs qui prennent en charge display:table). Elle présente toutefois l'inconvénient de ne pouvoir être utilisée que sur un maximum de 3 frères et sœurs.

//the html    
<div class='container'>
    <div class='div1'>1</div>
    <div class='div2'>2</div>
    <div class='div3'>3</div>
</div>

//the css
.container {
   display:table;    
}
.div1 {
    display:table-footer-group;
}
.div2 {
    display:table-header-group;
}
.div3 {
    display:table-row-group;
}

Cela réorganisera les éléments de 1,2,3 à 2,3,1. En fait, tout élément dont l'affichage est défini sur table-header-group sera positionné en haut et table-footer-group en bas. Naturellement, table-row-group place un élément au milieu.

Cette méthode est rapide, bénéficie d'un bon support et nécessite beaucoup moins de css que l'approche flexbox. Si vous ne cherchez qu'à échanger quelques éléments pour une mise en page mobile, par exemple, n'excluez pas cette technique.

Vous pouvez consulter une démo en direct sur codepen : http://codepen.io/thepixelninja/pen/eZVgLx

Answer 4

Cette solution a fonctionné pour moi :

En utilisant un élément parent comme :

.parent-div {
    display:flex;
    flex-direction: column-reverse;
}

Dans mon cas, je n'ai pas eu à modifier les css des éléments que je devais changer.

Answer 5

Dans certains cas, vous pouvez simplement utiliser le flex-box propriété order .

Très simple :

.flex-item {
    order: 2;
}

Voir : https://css-tricks.com/almanac/properties/o/order/