[CSS] flex box の折り返しカラム指定方法

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;
}