Расположение элементов в html

Вы можете легко сделать это с помощью макета сетки CSS:

• вы можете использовать grid-template-columns: 3fr 2fr;, потому что у вас есть соотношение 60% к 40% элементов big и small,

• высоту строки можно установить с помощью grid-auto-rows: 100px,

• отступ между строками можно установить с помощью свойства grid-row-gap,

• теперь установите big, чтобы всегда занимать первый столбец, используя grid-column: 1, и small, чтобы всегда занимать второй столбец.

См. демонстрацию ниже для конфигурации до сих пор:

.container {
  padding: 10px;
  border: 1px solid red;
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-auto-rows: 100px;
  grid-row-gap: 10px;
}

.big {
  padding: 10px;
  background: lime;
  grid-column: 1;
}

.small {
  padding: 10px;
  background: orange;
  grid-column: 2;
}

<div class = "container">
  <div class = "big"> I AM BIG 1</div>
  <div class = "small"> I AM SMALL 1</div>
  <div class = "big"> I AM BIG 2</div>
  <div class = "big"> I AM BIG 3</div>
  <div class = "big"> I AM BIG 4</div>
  <div class = "small"> I AM SMALL 2 </div>
</div>

Теперь просто добавьте grid-auto-flow: dense, чтобы вытащить оранжевые блоки наверх — см. демо ниже:

.container {
  padding: 10px;
  border: 1px solid red;
  display: grid;
  grid-template-columns: 3fr 2fr; /* two columns */
  grid-auto-rows: 100px; /* row height */
  grid-row-gap: 10px; /* gap between rows */
  grid-auto-flow: dense; /* added */
}

.big {
  padding: 10px;
  background: lime;
  grid-column: 1; /* in first column */
}

.small {
  padding: 10px;
  background: orange;
  grid-column: 2; /* in second column */
}

<div class = "container">
  <div class = "big"> I AM BIG 1</div>
  <div class = "small"> I AM SMALL 1</div>
  <div class = "big"> I AM BIG 2</div>
  <div class = "big"> I AM BIG 3</div>
  <div class = "big"> I AM BIG 4</div>
  <div class = "small"> I AM SMALL 2 </div>
</div>

Вы можете просто изменить это, изменив порядок ваших divs как

<div class = "container">
    <div class = "big"> I AM BIG 1</div>
    <div class = "small"> I AM SMALL 1</div>
    <div class = "big"> I AM BIG 2</div>
    <div class = "small"> I AM SMALL 2 </div>
    <div class = "big"> I AM BIG 3</div>
    <div class = "big"> I AM BIG 4</div>  
</div>

Надеюсь, это то, что вы искали.

Если вы планируете использовать flex, я бы посоветовал вам разбить контейнер на два столбца, что упрощает эту задачу. Это тестовый код, который я сделал для этого. Надеюсь, это поможет вам.

HTML

<div class = "d-flex flex-row">
  <div class = "d-flex flex-column mr-1">
    <div class = "big-box">
      BOX 1
    </div>
    <div class = "big-box">
      BOX 2
    </div>
    <div class = "big-box">
      BOX 3
    </div>
    <div class = "big-box">
      BOX 4
    </div>
  </div>
  <div class = "d-flex flex-column">
    <div class = "small-box">
      BOX 5
    </div>
    <div class = "small-box">
      BOX 6
    </div>
  </div>
</div>

CSS

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
  align-items: center;
}

.big-box {
  background-color: green;
  width: 400px;
  height: 100px;
  margin: 2px 0;
  padding: 10px;
}

.small-box {
  background-color: orange;
  width: 300px;
  height: 100px;
  margin: 2px 0;
  padding: 10px;
}

.mr-1 {
  margin-right: .5rem;
}

Ссылка на скрипт JS: https://jsfiddle.net/SJ_KIllshot/uvr0hzkw/