制作メモ

3カラム目で折り返したい場合（4カラム目から次の行）の例です。

マークアップはこんな感じ。

<div class="flex-items">
    <div class="flex-items__item">1</div>
    <div class="flex-items__item">2</div>
    <div class="flex-items__item">3</div>
    <div class="flex-items__item">4</div>
    <div class="flex-items__item">5</div>
    <div class="flex-items__item">6</div>
    <div class="flex-items__item">7</div>
    <div class="flex-items__item">8</div>
    <div class="flex-items__item">9</div>
</div>

.flex-items {
    display: flex;
    flex-wrap: wrap;
}
.flex-items::after {
    content: '';
    width: 100%;
}
.flex-items__item:nth-child(n+4) {
    order: 1;
}

仕組みは order です。

order の初期値は 0 のため、1～3カラムは order: 0

4カラム目以降が order: 1

となります。

さらに、::after 疑似要素で追加されたコンテンツが .flex-items の最後に追加されるので、

.flex-items__item:nth-child(1) order: 0

.flex-items__item:nth-child(2) order: 0

.flex-items__item:nth-child(3) order: 0

.flex-items__item:nth-child(4) order: 1

・

・

・

.flex-items__item:nth-child(9) order: 1

.flex-items::after order: 0

となります。

これを order に従って順番を入れ替えると、疑似要素は width: 100% なので１カラムから３カラムは横並び、4カラムから次の行となるわけです。

もうひとつ ::before 疑似要素が残っているので、もう1カ所指定することも可能です。

::before 疑似要素は .flex-items の先頭に追加されるので、折り返したいカラムに order: 2 を指定します。

.flex-items::before {
    content: '';
    order: 2;
    width: 100%;
}
.flex-items__item:nth-child(n+6) {
    order: 2;
}