CSS с плавающей 2 колонки макет с несколькими элементами

Question

Я хочу создать простой макет с двумя столбцами, используя четыре элемента div.Я ограничен и не могу изменить структуру HTML.Я могу изменить только CSS.

Я хочу, чтобы второй div в правом столбце упал прямо под предыдущим правым столбцом div.Прямо сейчас он перемещается в верхнюю часть второго левого div.

Прямо сейчас это то, что у меня есть в HTML:

<div id="parent">
    <div class="left">
        Left 1
    </div>
    <div class="right">
        Right 1
    </div>
    <div class="left">
        Left 2
    </div>
    <div class="right">
        Right 2
    </div>
</div>

CSS:

.left {
  height: 400px;
  width: 60%;
  float: left;
  background-color: red;
  display: block;
}
.right {

  width: 30%;
  float: right;
  background-color: green;
   display: block;
}

Смотрите мою скрипку: http://jsfiddle.net/Lun61g7a/2/

Answer 1

Используйте flexbox и позволяйте элементам перемещаться в следующую "строку" при необходимости

#parent {
  display: flex;
  flex-wrap: wrap;
}

.left {
  height: 400px;
  width: 60%;
  background-color: red;
  display: block;
}

.right {
  width: 30%;
  background-color: green;
  display: block;
}

<div id="parent">
  <div class="left">
    Left 1
  </div>
  <div class="right">
    Right 1
  </div>
  <div class="left">
    Left 2
  </div>
  <div class="right">
    Right 2
  </div>
</div>