CSS макет: как разбить первый столбец после N элементов и следовать во втором столбце, просто с помощью CSS?

Question

Код HTML исправлен, и я не могу его изменить:

<div class="wrapper">
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
  <div>Element 4</div>
  <div>Element 5</div>
  <div>Element 6</div>
  <div>Element 7</div>
</div>

Я могу изменить только CSS

Я хочу макет из двух столбцов, таким образом:

+-----------------------+ +-------------+
|       Element 1       | | Element N+1 |
+-----------------------+ +-------------+
+-----------------------+ +-------------+
|       Element 2       | | Element N+2 |
+-----------------------+ +-------------+
...
+-----------------------+ +-------------+
|       Element N       | | Element 2N  |
+-----------------------+ +-------------+
                          +-------------+
                          | Element 2N+1|
                          +-------------+
                          ...
                          +-------------+
                          | Element 2N+M|
                          +-------------+

Я знаю, как выбрать первые N элементов и применить другой стиль (здесь: N = 4):

.wrapper > div:nth-child(-n+5) {
  width: 66vw
}
.wrapper > div {
  width: 33vw
}

Мне не хватает, как расположить элементы как на диаграмме.

Answer 1

Используя 2n + 1 трюк, добавив очистить оба свойства, мы можем разбить столбцы и получить желаемый макет

.wrapper:after {
      content: '';
      display: block;
      clear: both;
    }

    .wrapper>div {
      float: left;
      width: 33vw
    }

    .wrapper>div:nth-child(2n+1) {
      clear: both;
    }

<div class="wrapper">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
  </div>

Answer 2

Ну, я могу получить результат с:

.wrapper > div:nth-child(-n+5) {
  width: 66vw
  margin-left: 0;
  float: left;
}
.wrapper > div {
  width: 33vw;
  margin-left: 66vw;
}