Перенос элементов flexbox на другую строку

Всем доброго дня!

Вопрос по flexbox'ам. Есть flex-контейнер, в котором содержатся 4 элемента:

<div class="catalog__items">
<div class="catalog__items__item">1товар</div>
<div class="catalog__items__item">2товар</div>
<div class="catalog__items__item">3товар</div>
<div class="catalog__items__item">4товар</div>

CSS:

.catalog__items {
    display: flex;
    flex-wrap: wrap;
  } 
.catalog__items__item {
    display: flex;
    flex-direction: column;
}

Они расположены в одном ряду, flew-wrap их переносит, если экран сужается, сначала таким образом, что идут 3 в ряд, а 1 переносится на 2 строку, а затем уже так, как надо, т.е. по 2 в ряд.

Проблема в том, что я не знаю, как сделать, чтобы убрать это состояние, где переносится лишь 1 элемент. Т.е. чтобы сначала были по 4 в ряд, а затем по 2 в ряд.

Кто знает, как это сделать? Уже 5 страниц гугла перелистал, везде про flex-wrap написано, но он не дает нужного результата