comment réorganiser les éléments css sans js

Question

Problème

J'ai une mise en page à deux colonnes où la colonne de gauche contient les éléments 1 et 5 et la colonne de droite contient les éléments 2, 3 et 4.

Sur les écrans mobiles, je veux avoir une seule colonne où l'ordre est 1, 2, 3, 4 et 5 :

Desktop               Mobile

┌───────┬───────┐     ┌───────┐
│     1 │     2 │     │     1 │
├───────┼───────┤     ├───────┤
│     5 │     3 │     │     2 │
│       ├───────┤     ├───────┤
└───────┤     4 │     │     3 │
        └───────┘     ├───────┤
                      │     4 │
                      ├───────┤
                      │     5 │
                      │       │
                      └───────┘

Certaines exigences :

• Je ne connais pas la hauteur des boîtes à l'avance.
• Il se peut que toutes les boîtes aient des hauteurs différentes.
• Je ne veux pas modifier leur taille
• Le côté gauche ou le côté droit pourrait être plus élevé.

Je sais que je peux réorganiser les éléments avec Flex. Je sais également que je peux créer des colonnes et des rangées avec Flex, mais tous les éléments ont une hauteur dynamique. Existe-t-il un moyen d'obtenir cet effet sans utiliser de js ?

Exemple de code

démo sans flex

Le problème ici est que l'ordre n'est pas correct sur les écrans mobiles.

.container {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.container .left, .container .right {
  width: 50%;
}
@media screen and (max-width: 1000px) {
  .container {
    flex-direction: column;
  }
  .container .left, .container .right {
    width: 100%;
  }
}
.container .box {
  border: 1px solid black;
  width: 100%;
  height: 50px;
  padding: 10px;
  box-sizing: border-box;
}
.container .box.a {
  height: 80px;
}
.container .box.b {
  height: 150px;
}
.container .box.d {
  height: 80px;
}

<div class="container">
  <div class="left">
    <div class="box a"><span>1 - static height</span></div>
    <div class="box b"><span>5 - dynamic height</span></div>
  </div>
  <div class="right">
    <div class="box c"><span>2 - dynamic height</span></div>
    <div class="box d"><span>3 - dynamic height</span></div>
    <div class="box e"><span>4 - dynamic height</span></div>
  </div>
</div>

démo avec flex

Le problème ici est que le conteneur doit posséder un correct mais comme la hauteur de chaque boîte est déterminée par son contenu, je ne peux pas connaître la hauteur de la boîte. correct hauteur.

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.box {
  width: 100%;
  border: 1px solid black;
  padding: 10px;
  box-sizing: border-box;
}

@media screen and (min-width: 1000px) {
  .container {
    /* This is assumed for demonstration-purposes.
    // I don't know that height in advance. I just set
    // it to smth. so that exactly 1 and 5 are fitting
    // into the left col */
    height: 170px;
  }

  .box {
    width: 50%;
  }

  .b {
    order: -1;
  }

  .a {
    order: -2;
  }
}

<div class="container">
    <div class="box a"><span>1 - static height</span></div>
    <div class="box c"><span>2 - dynamic height</span></div>
    <div class="box d"><span>3 - dynamic height</span></div>
    <div class="box e"><span>4 - dynamic height</span></div>
    <div class="box b"><span>5 - dynamic height<br>foo<br>foo<br>foo<br>foo<br>foo</span></div>
</div>

Answer 1

Peut-être que quelque chose comme ça fonctionnera pour vous :

html{
  box-sizing:border-box;
}
*,
:after,
:before{
  box-sizing:inherit;
}

.box {
  border: solid 1px pink;
  padding: 10px;
  width: 100%;
}

.container {
  display: flex;
  flex-direction: column;
}
.a {
  order: 0;
}
.wrapper {
  order: 1;
}
.e {
  order: 2;
}

@media screen and (min-width: 1024px) {
  .container {
    display: block;
  }
  .a,
  .e {
    float: left;
    width: 50%;
  }
  .wrapper {
    width: 50%;
    float: right;
  }

  .b,
  .c,
  .d {
    width: 100%;
  }

}

<div class="container">
  <div class="wrapper">
    <div class="box b"><span>2 - dynamic height</span></div>
    <div class="box c"><span>3 - dynamic height</span></div>
    <div class="box d"><span>4 - dynamic height</span></div>
  </div>
  <div class="box a"><span>1 - static height</span></div>
  <div class="box e"><span>5 - dynamic height<br>foo<br>foo<br>foo<br>foo<br>foo</span></div>
</div>