0

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

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

2 ответа 2

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>

2
  • С помощью order не получиться так как блоки выводятся из бд и я не знаю какое количество их будет.
    – Vector
    27 авг 2021 в 10:08
  • @Vector, почему не получится? Используйте псевдоклассы: если задача - поменять местами второй и третий блоки, то задайте всем блокам order: 4 (и неважно, сколько их будет), первому задайте order: 1, второму - 3, третьему - 2. Я обновил ответ. 27 авг 2021 в 10:23
0

Поменять местами 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.