Поменять местами блоки flex

Question

Подскажите пожалуйста, как я могу поменять местами синий и зеленый блок.

#flex {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

#flex #center {
  width: 100%;
  height: 100px;
  background: red;
}

#flex #right {
  width: 50%;
  height: 100px;
  background: blue;
}

#flex #left {
  width: 50%;
  height: 100px;
  background: green;
}

#flex #right2 {
  width: 50%;
  height: 100px;
  background: orange;
}

#flex #left2 {
  width: 50%;
  height: 100px;
  background: gray;
}

<div id="flex">
  <div id="center"></div>
  <div id="right"></div>
  <div id="left"></div>
  <div id="left2"></div>
  <div id="right2"></div>
</div>

Answer 1

Поменять местами left и right, в чем проблема?

<div id="flex">
  <div id="center"></div>
  <div id="left"></div>
  <div id="right"></div>
  <div id="left2"></div>
  <div id="right2"></div>
</div>

Answer 2

Если задача - не менять вёрстку, а действовать только стилями, то можно блокам задать order и с его помощью поменять местами зелёный и синий:

#flex {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

#flex #center {
  width: 100%;
  height: 100px;
  background: red;
}

#flex #right {
  width: 50%;
  height: 100px;
  background: blue;
}

#flex #left {
  width: 50%;
  height: 100px;
  background: green;
}

#flex #right2 {
  width: 50%;
  height: 100px;
  background: orange;
}

#flex #left2 {
  width: 50%;
  height: 100px;
  background: gray;
}
/* вот тут интересное */
#flex > div {
  order: 4;
}
#flex > div:nth-of-type(1) {
  order: 1;
}
#flex > div:nth-of-type(2) {
  order: 3;
}
#flex > div:nth-of-type(3) {
  order: 2;
}

<div id="flex">
  <div id="center"></div>
  <div id="right"></div>
  <div id="left"></div>
  <div id="left2"></div>
  <div id="right2"></div>
</div>

БЛОГ НА HUSL

Поменять местами блоки flex

Ответы (2 шт):