コンテナ？の大きさが変わってしまう。

1枚目の画像のようなレイアウトを組みたいのですが、
2枚目の画像のように高さ520pxのはずの画像が左の1060の画像と同じ1060pxになってしまいます。
なので、下に回り込んでくるはずの520x520の画像が520x1060の下に配置されてしまっている状態です。

どなたか解決方法が分かる方はいませんか？よろしくお願いいたします。

文字の位置が変な場所にあるのはわざとなので無視してください。

HTML
1コード
2<main id="contents">
3	<!-- start -->
4	<section class="tmp_collection5">
5		<h2 class="c-title--primary">見出しが入ります。見出しが入ります。</h2>
6		<div class="box_flex">
7			<div class="items main_items">
8				<div class="box_img">
9					<img src="https://placehold.jp/3d4070/ffffff/520x1060.png" alt="サブ見出しが入ります。">
10				</div>
11				<div class="box_tags">
12					<li>タグ</li>
13					<li>タグ</li>
14				</div>
15				<div class="price c-text--primary">
16					￥100,000(税込)
17				</div>
18				<h2 class="c-title--secondary">サブ見出しが入ります。</h2>
19				<p class="c-text--primary">テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
20			</div>
21			<div class="items sub_items">
22				<div class="box_img">
23					<img src="https://placehold.jp/3d4070/ffffff/520x520.png" alt="サブ見出しが入ります。">
24				</div>
25				<div class="box_tags">
26					<li>タグ</li>
27					<li>タグ</li>
28				</div>
29				<div class="price c-text--primary">
30					￥100,000(税込)
31				</div>
32				<h2 class="c-title--secondary">サブ見出しが入ります。</h2>
33				<p class="c-text--primary">テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
34			</div>
35			<div class="items sub_items">
36				<div class="box_img">
37					<img src="https://placehold.jp/3d4070/ffffff/520x520.png" alt="サブ見出しが入ります。">
38				</div>
39				<div class="box_tags">
40					<li>タグ</li>
41					<li>タグ</li>
42				</div>
43				<div class="price c-text--primary">
44					￥100,000(税込)
45				</div>
46				<h2 class="c-title--secondary">サブ見出しが入ります。</h2>
47				<p class="c-text--primary">テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
48			</div>
49			<div class="items sub_items">
50				<div class="box_img">
51					<img src="https://placehold.jp/3d4070/ffffff/520x520.png" alt="サブ見出しが入ります。">
52				</div>
53				<div class="box_tags">
54					<li>タグ</li>
55					<li>タグ</li>
56				</div>
57				<div class="price c-text--primary">
58					￥100,000(税込)
59				</div>
60				<h2 class="c-title--secondary">サブ見出しが入ります。</h2>
61				<p class="c-text--primary">テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
62			</div>
63			<div class="items sub_items">
64				<div class="box_img">
65					<img src="https://placehold.jp/3d4070/ffffff/520x520.png" alt="サブ見出しが入ります。">
66				</div>
67				<div class="box_tags">
68					<li>タグ</li>
69					<li>タグ</li>
70				</div>
71				<div class="price c-text--primary">
72					￥100,000(税込)
73				</div>
74				<h2 class="c-title--secondary">サブ見出しが入ります。</h2>
75				<p class="c-text--primary">テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
76			</div>
77		</div>
78		<div class="box_flex">
79			<div class="items main_items_right">
80				<div class="box_img">
81					<img src="https://placehold.jp/3d4070/ffffff/520x1060.png" alt="サブ見出しが入ります。">
82				</div>
83				<div class="box_tags">
84					<li>タグ</li>
85					<li>タグ</li>
86				</div>
87				<div class="price c-text--primary">
88					￥100,000(税込)
89				</div>
90				<h2 class="c-title--secondary">サブ見出しが入ります。</h2>
91				<p class="c-text--primary">テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
92			</div>
93			<div class="items">
94				<div class="box_img">
95					<img src="https://placehold.jp/3d4070/ffffff/520x520.png" alt="サブ見出しが入ります。">
96				</div>
97				<div class="box_tags">
98					<li>タグ</li>
99					<li>タグ</li>
100				</div>
101				<div class="price c-text--primary">
102					￥100,000(税込)
103				</div>
104				<h2 class="c-title--secondary">サブ見出しが入ります。</h2>
105				<p class="c-text--primary">テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
106			</div>
107			<div class="items">
108				<div class="box_img">
109					<img src="https://placehold.jp/3d4070/ffffff/520x520.png" alt="サブ見出しが入ります。">
110				</div>
111				<div class="box_tags">
112					<li>タグ</li>
113					<li>タグ</li>
114				</div>
115				<div class="price c-text--primary">
116					￥100,000(税込)
117				</div>
118				<h2 class="c-title--secondary">サブ見出しが入ります。</h2>
119				<p class="c-text--primary">テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
120			</div>
121			<div class="items">
122				<div class="box_img">
123					<img src="https://placehold.jp/3d4070/ffffff/520x520.png" alt="サブ見出しが入ります。">
124				</div>
125				<div class="box_tags">
126					<li>タグ</li>
127					<li>タグ</li>
128				</div>
129				<div class="price c-text--primary">
130					￥100,000(税込)
131				</div>
132				<h2 class="c-title--secondary">サブ見出しが入ります。</h2>
133				<p class="c-text--primary">テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
134			</div>
135			<div class="items">
136				<div class="box_img">
137					<img src="https://placehold.jp/3d4070/ffffff/520x520.png" alt="サブ見出しが入ります。">
138				</div>
139				<div class="box_tags">
140					<li>タグ</li>
141					<li>タグ</li>
142				</div>
143				<div class="price c-text--primary">
144					￥100,000(税込)
145				</div>
146				<h2 class="c-title--secondary">サブ見出しが入ります。</h2>
147				<p class="c-text--primary">テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
148			</div>
149		</div>
150	</section>
151	<!-- end -->
152</main><!-- /#contents -->

CSS
1コード
2.c-title--primary {
3	font-size: 45px;
4	text-align: center;
5	@media screen and (max-width:767px) {
6		font-size: 1.2rem;
7	}
8}
9.c-title--secondary {
10	font-size: 25px;
11	color: #000;
12	@media screen and (min-width:1364px) {
13		position: absolute;
14		bottom: 60%;
15		left: 4%;
16	}
17	@media screen and (max-width:767px) {
18		font-size: 1rem;
19	}
20}
21.c-text--primary {
22	font-size: 16px;
23	color: #000;
24	@media screen and (min-width:1364px) {
25		position: absolute;
26		bottom: 70%;
27		left: 4%;
28	}
29	@media screen and (max-width:767px) {
30		font-size: 0.5rem;
31	}
32}
33
34.tmp_collection5 {
35	max-width: 1600px;
36	width: 90%;
37	margin-left: auto;
38	margin-right: auto;
39	margin-top: 100px;
40	.box_flex {
41		display: flex;
42		flex-wrap: wrap;
43		justify-content: space-between;
44		.main_items {
45			float: left;
46		}
47		.sub_items {
48			max-height: 520px;
49		}
50	}
51	.items {
52		position: relative;
53		.box_tags {
54			display: flex;
55			flex-wrap: wrap;
56			li {
57				color: #fff;
58				background-color: #ffbf0f;
59				text-align: center;
60				@media screen and (min-width:1364px) {
61					padding: 3px 5%;
62					position: absolute;
63					top: 3%;
64					left: 4%;
65					&:last-child {
66						margin-left: 20%;
67					}
68				}
69				@media screen and (max-width:767px) {
70					padding: 2%;
71					position: absolute;
72					top: 3%;
73					left: 5%;
74					&:last-child {
75						margin-left: 30%;
76					}
77				}
78			}
79		}
80		.price {
81			@media screen and (min-width:1364px) {
82				position: absolute;
83				top: 3%;
84				left: 70%;
85			}
86		}
87		@media screen and (max-width:767px) {
88			width: 47.5%;
89		}
90	}
91}