レスポンシブwebデザイン 1つの要素を１番後ろに持っていくには

1つのsectionの中でMOREという文字を一番後ろに回すことを実現したいです。ですが何の対処もしないと1枚目の画像のような状況に陥ってしまいます。いろいろなコードを試しましたが上手くいきませんでした。
このような問題を解決するにはどうすれば良いのでしょうか？
画像二枚目、三枚目のような表示の仕方になるようにしたいです。
回答よろしくお願いいたします。

HTML
1 <section class="hako1">
2     <div class="product-text">
3       <h2>PRODUCT</h2>
4      </div>
5       <div class="product-detail">
6       <h3>MORE</h3>
7    </div>
8  </section>
9
10      <div class="profile">
11        <div class="world">
12          <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/01/wh_thumb2.png">
13          <p>地球一周 365日 
14            世<br>界遺産絶景の旅</p>
15
16        </div>
17
18        <div class="kyoto">
19          <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/12/kyoto365_thumnail-1.png">
20        <p> 365日 京都 絶景の<br>旅</p>
21        </div>
22
23        <div class="Hokkaido">
24          <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/09/banner_thumb1.png">
25        <p>365日 北海道 絶景<br>
26          日めくりカレンダー</p>
27        </div>
28        </div>
29
30      <div class="profile2">
31        <div class="Hokkaido2">
32          <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/08/thumb_gokkaido.png">
33          <p>365日 北海道
34            絶景<br>の旅</p>
35
36        </div>
37
38        <div class="TWFD">
39          <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2019/05/thumb_fes.png">
40        <p> The World<br>
41           Festival Duide
42           - <br>海外の音楽フェス完<br>
43          全ガイド -</p>
44        </div>
45
46        <div class="the-world">
47          <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2018/11/banner_%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB21.png">
48        <p>この世界で死ぬまで<br>
49          にしたいこと2000</p>
50        </div>
51        </div>

CSS
1.hako1 {
2  display: flex;
3  justify-content: center;
4}
5
6@media screen and (max-width:450px) {
7  .hako1 {
8    display: flex;
9    flex-direction: column;
10  }
11  }
12
13
14.product-text h2 {
15  display: block;
16  margin: 100px 0px 50px 0px;
17  position: relative;
18  left: -150%;
19  font-size: 30px;
20  font-weight: normal;
21  /* 下の波線img */
22  background: url(https://pas-pol.jp/wp-content/themes/pas-pol/dist/img/sectionTitle-underLine@2x.png) no-repeat;
23  background-size: 68px 8px; 
24  background-position: 0 bottom;
25  padding-bottom: 17px;
26  line-height: 1;
27  font-family: "Gill Sans Std Book", sans-serif;
28  letter-spacing: 0.1em;
29}
30
31.product-detail h3 {
32  display: block;
33  position: relative;
34  top: 100px;
35  bottom: 50px;
36  left: 150%;
37  padding: 10px 55px 10px 55px;
38  border: solid 1px;
39  font-family: "Gill Sans Std Book", sans-serif;
40  font-weight: 400;
41  font-size: 14px;
42  background-image: url(https://pas-pol.jp/wp-content/themes/pas-pol/dist/img/button-arrow@2x.png) ;
43  background-repeat: no-repeat;
44  background-position: 130px 50%;
45  background-size: 8px;
46}
47
48@media screen and (max-width:450px) {
49  .product-text h2 {
50    position: relative;
51    left: 30%;
52  }
53}
54
55
56.profile {
57  width: 100%;
58  display: flex;
59  justify-content: center;
60}
61
62@media screen and (max-width:450px) {
63  .profile {
64    display: flex;
65    flex-direction: column;
66  }
67  }
68
69.world img {
70  width: 240px;
71  margin-right: 30px;
72}
73
74@media screen and (max-width:450px) {
75  .world img {
76    width: 90%;
77    position: relative;
78    left: 30px;
79  }
80  }
81
82.world p {
83  font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
84  , "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
85  font-style: normal;
86  color: #13191b;
87  font-size: 20px;
88  font-weight: 700;
89  line-height: 34px;
90  letter-spacing: 0.1em;
91  position: relative;
92  right: 30px;
93  text-align: center;
94}
95
96@media screen and (max-width:450px) {
97  .world p {
98    font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
99  , "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
100  font-style: normal;
101  color: #13191b;
102  font-size: 18px;
103  font-weight: 600;
104  line-height: 34px;
105  letter-spacing: 0.1em;
106  margin-top: 0px;
107  position: relative;
108  right: 3%;
109  }
110  }
111
112.kyoto img {
113  width: 240px;
114}
115
116
117@media screen and (max-width:450px) {
118  .kyoto img {
119    width: 90%;
120    position: relative;
121    left: 30px;
122  }
123  }
124
125.kyoto p {
126  font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
127  , "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
128  font-style: normal;
129  color: #13191b;
130  font-size: 20px;
131  font-weight: 700;
132  line-height: 34px;
133  margin-left: 10px;
134  margin-bottom: 70px;
135  letter-spacing: 0.1em;
136}
137
138@media screen and (max-width:450px) {
139  .kyoto p {
140    font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
141  , "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
142  font-style: normal;
143  color: #13191b;
144  font-size: 18px;
145  font-weight: 600;
146  line-height: 34px;
147  letter-spacing: 0.1em;
148  margin-top: 0px;
149  margin-bottom: 18px;
150  position: relative;
151  left: 25%;
152  }
153  }
154
155.Hokkaido img {
156  width: 240px;
157  position: relative;
158  left: 30px;
159}
160
161
162@media screen and (max-width:450px) {
163  .Hokkaido img {
164    width: 90%;
165    position: relative;
166    left: 30px;
167  }
168  }
169
170.Hokkaido p {
171  font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
172  , "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
173  font-style: normal;
174  color: #13191b;
175  font-size: 20px;
176  font-weight: 700;
177  line-height: 34px;
178  margin-left: 10px;
179  margin-bottom: 70px;
180  letter-spacing: 0.1em;
181  text-align: center;
182}
183
184
185@media screen and (max-width:450px) {
186  .Hokkaido p {
187    font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
188  , "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
189  font-style: normal;
190  color: #13191b;
191  font-size: 18px;
192  font-weight: 600;
193  line-height: 34px;
194  letter-spacing: 0.1em;
195  margin-top: 0px;
196  margin-bottom: 18px;
197  }
198  }
199
200.profile2 {
201  display: flex;
202  justify-content: center;
203}
204
205
206@media screen and (max-width:450px) {
207  .profile2 {
208    display: flex;
209    flex-direction: column;
210  }
211  }
212
213
214.Hokkaido2 img {
215  width: 240px;
216}
217
218@media screen and (max-width:450px) {
219  .Hokkaido2 img {
220    width: 90%;
221    position: relative;
222    left: 30px;
223  }
224  }
225
226
227.Hokkaido2 p {
228  font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
229  , "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
230  font-style: normal;
231  color: #13191b;
232  font-size: 20px;
233  font-weight: 700;
234  line-height: 34px;
235  margin-left: 20px;
236  letter-spacing: 0.1em;
237}
238
239
240@media screen and (max-width:450px) {
241  .Hokkaido2 p {
242    font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
243  , "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
244  font-style: normal;
245  color: #13191b;
246  font-size: 18px;
247  font-weight: 600;
248  line-height: 34px;
249  letter-spacing: 0.1em;
250  margin-top: 0px;
251  margin-bottom: 18px;
252  position: relative;
253  left: 25%;
254  }
255  }
256
257
258.TWFD img {
259  width: 240px;
260  margin: 0px 30px 0px 30px;
261}
262
263@media screen and (max-width:450px) {
264  .TWFD img {
265    width: 90%;
266    /* position: relative; */
267  }
268  }
269
270.TWFD p {
271  font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
272  , "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
273  font-style: normal;
274  color: #13191b;
275  font-size: 20px;
276  font-weight: 700;
277  line-height: 34px;
278  letter-spacing: 0.1em;
279  margin-left: 45px;
280}
281
282@media screen and (max-width:450px) {
283  .TWFD p {
284    font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
285  , "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
286  font-style: normal;
287  color: #13191b;
288  font-size: 18px;
289  font-weight: 600;
290  line-height: 34px;
291  letter-spacing: 0.1em;
292  margin-top: 0px;
293  margin-bottom: 18px;
294  position: relative;
295  left: 20%;
296  }
297  }
298
299
300.the-world img {
301width: 240px;
302}
303
304@media screen and (max-width:450px) {
305  .the-world img {
306    width: 90%;
307    position: relative;
308    left: 10px;
309  }
310  }
311
312.the-world p {
313  font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
314  , "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
315  font-style: normal;
316  color: #13191b;
317  font-size: 20px;
318  font-weight: 700;
319  line-height: 34px;
320  letter-spacing: 0.1em;
321  text-align: center;
322}
323
324
325
326/* 3ページ目の終盤 空白調整 */
327.profile2 {
328  margin-bottom: 120px;
329}

行動規範の内容に同意します

回答1件

ベストアンサー

頂いたコードの範囲だと、こんな感じでしょうか。

css
1    body { /* body直下の場合。そうでない場合は親要素を指定してください */
2      display: flex;
3      flex-direction: column;
4    }
5
6    .hako1 {
7      display: contents;
8    }
9
10    .product-detail {
11      order: 1;
12    }