要素をflexで並べたい。

CSS初心者です。

前提・実現したいこと

↑こちらの画像の、下に落ちてしまっている三つの要素を上の並んでいる三つの要素の下に回り込ませたいのですが、皆さんならどう実現しますでしょうか。

上の４つの並んでいる要素は、Flexを使用しています。

該当のソースコード　HTML

<main id="contents">  <section class="tmp-collection1"> <h2 class="c-title--primary">NEW!</h2> <div class="box_flex"> <div class="items"> <div class="box_img"> <img src="https://placehold.jp/3d4070/ffffff/595x595.png" alt="見出しが入ります。見出しが入ります。"> </div> <ul class="box_tags"> <li>タグ</li> <li>タグ</li> </ul> <h2 class="c-title--primary">見出しが入ります。<br>見出しが入ります。</h2> <h2 class="c-title--secondary">サブ見出しが入ります。サブ見出しが入ります。<br> サブ見出しが入ります。サブ見出しが入ります。</h2> <p class="price c-text--primary"> ￥100,000<span class="tax">(税込)</span> </p> <div class="c-btn--primary box_btn"> <a href="#77777">ボタン</a> </div> </div> <div class="items"> <div class="box_img"> <img src="https://placehold.jp/3d4070/ffffff/300x300.png" alt="サブ見出しが入ります。サブ見出しが入ります。"> </div> <ul class="box_tags"> <li>タグ</li> </ul> <h2 class="c-title--secondary">サブ見出しが入ります。<br> サブ見出しが入ります。</h2> <p class="c-text--primary">テキストが入ります。テキストが入りま<br> す。テキストが入ります。</p> <p class="price c-text--primary">￥100,000<span class="tax">(税込)</span></p> <div class="c-btn--primary box_btn"> <a href="#77777">ボタン</a> </div> </div> <div class="items"> <div class="box_img"> <img src="https://placehold.jp/3d4070/ffffff/300x300.png" alt="サブ見出しが入ります。サブ見出しが入ります。"> </div> <ul class="box_tags"> <li>タグ</li> </ul> <h2 class="c-title--secondary">サブ見出しが入ります。<br> サブ見出しが入ります。</h2> <p class="c-text--primary">テキストが入ります。テキストが入りま<br>す。テキストが入ります。</p> <p class="price c-text--primary">￥100,000<span class="tax">(税込)</span></p> <div class="c-btn--primary box_btn"> <a href="#77777">ボタン</a> </div> </div> <div class="items"> <div class="box_img"> <img src="https://placehold.jp/3d4070/ffffff/300x300.png" alt="サブ見出しが入ります。サブ見出しが入ります。"> </div> <ul class="box_tags"> <li>タグ</li> </ul> <h2 class="c-title--secondary">サブ見出しが入ります。<br>サブ見出しが入ります。</h2> <p class="c-text--primary">テキストが入ります。テキストが入りま<br>す。テキストが入ります。</p> <p class="price c-text--primary">￥100,000<span class="tax">(税込)</span></p> <div class="c-btn--primary box_btn"> <a href="#77777">ボタン</a> </div> </div> <div class="items"> <div class="box_img"> <img src="https://placehold.jp/3d4070/ffffff/300x300.png" alt="サブ見出しが入ります。サブ見出しが入ります。"> </div> <ul class="box_tags"> <li>タグ</li> </ul> <h2 class="c-title--secondary">サブ見出しが入ります。<br>サブ見出しが入ります。</h2> <p class="c-text--primary">テキストが入ります。テキストが入りま<br>す。テキストが入ります。</p> <p class="price c-text--primary">￥100,000<span class="tax">(税込)</span></p> <div class="c-btn--primary box_btn"> <a href="#77777">ボタン</a> </div> </div> <div class="items"> <div class="box_img"> <img src="https://placehold.jp/3d4070/ffffff/300x300.png" alt="サブ見出しが入ります。サブ見出しが入ります。"> </div> <ul class="box_tags"> <li>タグ</li> </ul> <h2 class="c-title--secondary">サブ見出しが入ります。<br>サブ見出しが入ります。</h2> <p class="c-text--primary">テキストが入ります。テキストが入りま<br>す。テキストが入ります。</p> <p class="price c-text--primary">￥100,000<span class="tax">(税込)</span></p> <div class="c-btn--primary box_btn"> <a href="#77777">ボタン</a> </div> </div> <div class="items"> <div class="box_img"> <img src="https://placehold.jp/3d4070/ffffff/300x300.png" alt="サブ見出しが入ります。サブ見出しが入ります。"> </div> <ul class="box_tags"> <li>タグ</li> </ul> <h2 class="c-title--secondary">サブ見出しが入ります。<br>サブ見出しが入ります。</h2> <p class="c-text--primary">テキストが入ります。テキストが入りま<br>す。テキストが入ります。</p> <p class="price c-text--primary">￥100,000<span class="tax">(税込)</span></p> <div class="c-btn--primary box_btn"> <a href="#77777">ボタン</a> </div> </div> </div> </section>  </main> </body> </html>

該当のソースコード CSS

@charset "utf-8";

{
box-sizing: border-box;

}

.c-title--primary {
font-size: 45px;
line-height: 1.7;
}
.c-title--secondary {
font-size: 25px;
line-height: 1.8;
}
.c-text--primary {
font-size: 16px;
line-height: 1.8;
}
.c-btn--primary {
a {
display: inline-block;
min-width: 250px;
padding: 10px 5%;
background-color: #9b9b9b;
text-align: center;
color: #fff;
}
}
.tmp-collection1 {
max-width: 1600px;
width: 90%;
margin-left: auto;
margin-right: auto;
:nth-of-type(n+2) {
margin-left: (((1005 - (300 * 3)) / 5) / 1005) * 100%;
}
.box_flex {
display: flex;
flex-wrap: wrap;
}
.items {
.box_img {
margin-bottom: 30px;
}
.box_tags {
display: flex;
flex-wrap: wrap;
margin-top: -10px;
margin-left: -10px;
li {
margin-left: 10px;
padding: 5px 5%;
font-size: 13px;
color: #fff;
min-width: 60px;
background-color: #ffbf0f;
}
}
.price {
margin-bottom: 15px;
}
}
}