CodePen: Как поменять эти блоки в определенном порядке, в ответ?

Question

Рассмотрим эти 4 блока.

В HTML они упорядочены следующим образом: сначала деление, соответствующее красному блоку, затеморанжевый, затем желтый и, наконец, зеленый.

В ответ на каждый из этих блоков width: 100%, поэтому они отображаются в том же порядке.

Однако я бы хотелотображать блоки в таком виде: красный, оранжевый, зеленый, желтый и т. д.

Как можно решить эту проблему, используя только CSS?Я могу использовать гибкий макет бокса.

#parent {
  width: 1400px;
  max-width: 100%;
  margin: auto;
}

#div_1, #div_2, #div_3, #div_4 {
  display: inline-block;
  width: 50%;
  padding: 100px;
  vertical-align: middle;
  box-sizing: border-box;
}

#div_1 {
  background: red;
  padding: 50px;
}

#div_2 {
  background: orange;
}

#div_3 {
  background: yellow;
}

#div_4 {
  background: green;
  padding: 50px;
}

@media screen and (max-width: 900px) {
  #div_1, #div_2, #div_3, #div_4 {
    width: 100%;
  }
}

<div id="parent">

  <div id="div_1"></div><!--
  --><div id="div_2"></div>

  <div id="div_3"></div><!--
  --><div id="div_4"></div>

</div>

Вот кодовая ручка: https://codepen.io/anon/pen/aPvyKZ

Answer 1

Добавьте это к вашему медиа-запросу:

  #div_3, #div_4 {
    flex-direction: column-reverse;
  }

Answer 2

возможно с flexbox и order

#parent {
  width: 1400px;
  max-width: 100%;
  margin: auto;
  display:flex; /* display:flex for use 'order' . */
  flex-wrap:wrap;
  align-items:center;
}

#div_1, #div_2, #div_3, #div_4 {
  display: inline-block;
  width: 50%;
  padding: 100px;
  vertical-align: middle;
  box-sizing: border-box;
}

#div_1 {
  background: red;
  padding: 50px;
  order:1; /* red is first */
}

#div_2 {
  background: orange;
  order:2; /* orange is second */
}

#div_3 {
  background: yellow;
  order:4; /* yellow is fourth */
}

#div_4 {
  background: green;
  padding: 50px;
  order:3; /* green is third */
}

@media screen and (max-width: 900px) {
  #div_1, #div_2, #div_3, #div_4 {
    width: 100%;
  }
}

<div id="parent">

  <div id="div_1"></div><!--
  --><div id="div_2"></div>

  <div id="div_3"></div><!--
  --><div id="div_4"></div>

</div>