Comment modifier l'ordre des éléments sans modifier le code html?

il y a plusieurs façons de réorganiser vos éléments sans modifier le HTML.

CSS flexbox fournit le order propriété. Cependant, flex peut ne pas être une bonne option pour vous puisque vous voulez qu'un élément Couvre deux rangées. Les problèmes que vous pourriez rencontrer sont discutés ici:

• Faire un div durée de deux lignes d'une grille
• est-il possible pour les éléments flex de s'aligner étroitement sur les éléments ci-dessus ?

la disposition de la grille CSS, cependant, offre beaucoup de bonnes solutions à votre problème. order la propriété est aussi disponible ici, mais ce n'est pas nécessaire.

Voici une solution en utilisant le grid-template-areas propriété.

.wrapper {
  display: grid;
  grid-gap: 5px;
  grid-template-areas: "first second third";
}

.firstElement {
  grid-area: first;
  background: #000;
  color: #fff
}

.secondElement {
  grid-area: second;
  background: grey
}

.thirdElement {
  grid-area: third;
  background: #ddd
}

@media (max-width: 767px) {
  .wrapper {
    grid-template-areas: "first third" 
                         "second third";
  }

<div class="wrapper">
  <div class="firstElement">First Element</div>
  <div class="secondElement">Second Element</div>
  <div class="thirdElement">Third Element</div>
</div>

jsFiddle démo

prise en charge du navigateur pour CSS Grid.

Vous devez utiliser flex-wrap sur le .wrapper et order sur les enfants.

.wrapper {
  max-width: calc(100%/2);  //Just to keep your original width intact
  display: flex;
  flex-wrap:wrap;
}

.firstElement, .secondElement, .thirdElement{
    min-width:50%; //This will force your width to 50% of your wrapper class
}
.firstElement{ order: 1;}
.secondElement{ order: 2;}
.thirdElement{ order: 3;}

.wrapper {
  background: #fff;
  max-width: calc(100%/2);
  display: flex;
  flex-wrap: wrap;
}

.firstElement,
.secondElement,
.thirdElement {
  display: inline-block;
  min-width: 50%
}

.firstElement {
  background: #000;
  color: #fff;
  order: 1;
}

.secondElement {
  background: grey;
  order: 3;
}

.thirdElement {
  background: #ddd;
  order: 2;
}

@media (max-width: 767px) {}

<div class="wrapper">
  <div class="firstElement">First Element</div>
  <div class="secondElement">Second Element</div>
  <div class="thirdElement">Third Element</div>
</div>

si vous ne voulez pas utiliser flex, les propriétés table-layout peuvent vous aider .

jouer avec https://codepen.io/gc-nomade/pen/yjrOJJ ou exécutez simplement la démo ci-dessous.

.wrapper {
  background: #fff;
  width: 100%;
}

.firstElement,
.secondElement,
.thirdElement {
  display: inline-block;
  min-width: 33%;/* will be usefull for the mediaquerie . tune to your own value / needs */
  margin: 0.11%;/* if ever needed */
}

.firstElement {
  background: #000;
  color: #fff;
}

.secondElement {
  background: grey;
}

.thirdElement {
  background: rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
  .wrapper {
    display: table;/* trigger the table-layout */
  }
  .a {
    display: block;
    margin: 2px;
  }
  .b {
    display: table-cell;/* make this one only acting as a cell aside previous */
  }
}

<div class="wrapper">
  <div class="firstElement a">First Element</div><!-- comment to override inline-block side effect 
  --><div class="secondElement a">Second Element</div><!--
  --><div class="thirdElement b">Third Element</div>
</div>

pour de vrai réorganiser, flex ou grid le fera à l'intérieur de n'importe quelle quantité d'enfants.

les propriétés table-layout permettent cet effet visuel sur une seule ligne mais fonctionne avec les anciens navigateurs.

puisque la question n'est pas étiquetée avec flex ou new tech, ni incluse dans le code source, c'est une solution reflétant que:

*s'il vous Plaît noter, j'ai changé la largeur des éléments à 100%/3.1 pour l'effet visuel, vous pouvez le modifier pour l'adapter à vos besoins.

.wrapper {
  background: #fff;
  position: relative;
  width: 100%;
  height: 500px;
}

.firstElement,
.secondElement,
.thirdElement {
  display: inline-block;
  width: calc(100%/3.1)
}

.firstElement {
  background: #000;
  color: #fff;
  height: 33%;
}

.secondElement {
  background: grey;
  height: 33%
}

.thirdElement {
  background: #ddd;
  height: 33%
}

@media (max-width: 767px) {
  .firstElement, .secondElement, .thirdElement {
    width: 50%;
  }
  .firstElement {
    float: left;
  }
  .secondElement {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .thirdElement {
    float: left;
    height: 100%;
  }
}

<div class="wrapper">
  <div class="firstElement">First Element</div>
  <div class="secondElement">Second Element</div>
  <div class="thirdElement">Third Element</div>
</div>

essentiellement, faire l'emballage position parent nous donne la liberté de positionnement absolu à l'intérieur de lui pour les enfants. Nous pouvons profiter de cette

Vous pouvez le faire facilement avec l' positionnement, qui a un grand support, et éventuellement combiné avec le variables CSS, dont le soutien augmente et n'est pas petit:

:root {
  --firstElementHeight: 50px; /* adjust */
  --secondElementHeight: 50px; /* adjust */
  --thirdElementHeight: calc(var(--firstElementHeight) + var(--secondElementHeight)); /* the sum of other siblings heights so that the "columns" always match */
}

.firstElement,
.secondElement,
.thirdElement {display: inline-block; width: 33.33%}

.firstElement {background: #000; color: #fff}
.secondElement {background: grey}
.thirdElement {background: #ddd}

@media (max-width: 767px) {
  .wrapper {position: relative}
  .firstElement {height: var(--firstElementHeight)}
  .secondElement {height: var(--secondElementHeight); position: absolute; left: 0; top: var(--firstElementHeight)} /* moved down by the height of the .firstElement */
  .thirdElement {height: var(--thirdElementHeight)}
}

<div class="wrapper">
  <div class="firstElement">First Element</div>
  <div class="secondElement">Second Element</div>
  <div class="thirdElement">Third Element</div>
</div>

Même sans variables CSS, le positionnement la solution est assez simple et fiable.