CSS grid で左側に画像、右側に説明文を入れたい。

タイトル通り、HTML / CSS を使って左側に画像、右側に説明文（番号、タイトル、詳細の順）を表示させたいです。
左側に説明文、右側に画像を入れたもの(01)を入れ替えただけなのに画像が表示されません。どうしてでしょうか？

HTML
1
2<!-- 01  正しく表示される方-->
3          <div class="container-num">
4            <div class="number-text-box">
5              <div class="number">01</div>
6              <h3 class="heading-tertiary">タイトル１</h3>
7              <div class="detail">
8                <p class="detail-en">
9                  説明文
10                </p>
11               <p class="detail-jp">
12                  説明文
13                </p>
14              </div>
15            </div>
16            <div class="number-img">
17              <img
18                src="img/img01.JPG"
19                class="pc number-img"
20                alt="写真１"
21              />
22            </div>
23          </div>
24
25<!-- 02 画像が表示されない方-->
26
27          <div class="container-num">
28              <div class="number-img">
29                <img
30                  src="img/img02.JPG"
31                  class="pc number-img"
32                  alt="写真２"
33                />
34            </div>
35
36            <div class="number-text-box">
37              <div class="number">02</div>
38              <h3 class="heading-tertiary">タイトル２</h3>
39
40              <div class="detail">
41                <p class="detail-en">
42                  説明文
43                </p>
44               <p class="detail-jp">
45                  説明文
46                </p>
47              </div>
48            </div>

CSS
1.container-num {
2  display: grid;
3  grid-template-columns: repeat(2, 1fr);
4  column-gap: 4rem;
5  margin-bottom: 10rem;
6  justify-content: center;
7  align-items: center;
8}
9
10.number-img {
11  width: 100%;
12}
13
14.number {
15  font-family: 'Noto Serif Display', serif;
16  font-size: 8.2rem;
17  font-weight: 900;
18  color: #eee;
19}
20
21.detail-en {
22  font-family: sans-serif;
23  line-height: 1.5;
24}
25
26