PCで背景の上に重ねて、横に並んだ、2枚の画像をスマホサイズでは縦表示にさせたい。

PCで横並びにボックスの背景色の上に重ねて、配置されて、（スライドインして出てくる画像）２枚を、スマホサイズここでは400px以下の時に、２枚の画像が縦に表示されるようにしたいです。**PCでは横並びのままでOKです。

コードの概要
ボックスboxで緑の背景色を作り、その上に、２つの画像をrelativeやabsolute4で重ねて、右からスライドインして、２つの画像がそれぞれ横並びにPCのみ）出てくるようになっています。2つの画像の位置は.absoluteのｃｓｓの部分のrightやleftで微調整しています。

2000px以下と400px以下のスタイルシートを提示しています。

試しとこと
cssに.flex4を追加しました。display:flex　スマホサイズ400px以下ｃｓｓにflex-direction: columnを追加しました。html内のflexのclassを全て消去しても、ＰＣではきちんと横並び表示になります。

実際のサイトになります。以下。デベロッパーツールで、400px以下で観覧すると、2つの画像ABが横にはみ出て、Aは全く見えません。PCサイズ1500ｐｘ程度で観覧すると、AB画像は横並びに配置されてます。
(https://rensyuu12.tokyo/PHPMailer/LPmouth.html)

html
1<!DOCTYPE html>
2
3<html lang="ja">
4
5<head>
6	<meta content="text/html; charset=utf-8" />
7	<meta name="viewport" content="width=device-width, initial-scale=1">
8	
9  <link rel="stylesheet" href="mouthlp.css">
10  <link rel="stylesheet" href="0LPcoderesponsive2000orless.css">
11  <link rel="stylesheet" href="8LPcoderesponsive400orless.css">
12
13	<title>コード</title>
14  <script src="jquery-3.6.0.min.js"></script>
15	
16 <style>
17
18</style>
19</head>
20<body>
21
22<!--緑のボックス背景の上に画像を２つ重ねる-->
23<div class="relative2">
24<!--緑のボックス背景で緑背景作成-->
25<div class="box" alt="［写真］" id="absolute4"></div>
26<div class="flex4">
27<!--classにスライドインのclassも含める-->
28<img src="image/49mouth.png" alt="［写真］" class="absolute5 slide-right show" id="gazouA"> 
29</div>
30<div class="flex4">
31<img src="image/50mouth.png" alt="［背景］" class="absolute6 slide-right show" id="gazouB"> 
32</div>
33</div>
34<script>
35    //フェードイン用のコードです
36    $(function(){
37        $(window).on('load scroll', function() {
38            $(".show").each(function() {
39                var winScroll = $(window).scrollTop();
40                var winHeight = $(window).height();
41                var scrollPos = winScroll + (winHeight * 0.9);
42                if($(this).offset().top < scrollPos) {
43                
44                    $(this).css({opacity: 1, transform: 'translate(0, 0)'});
45                }
46            });
47        });
48    });
49    //フェードイン用のコードはここまでです
50</script>
51</body>
52</html>

mouth.css

css
1/* 緑色の背景ボックス */
2  .box {
3 margin-top: -10px;
4  height: 670px;
5  background-color: rgb(1, 224, 157);
6  width: 80%;
7  margin: 0 auto;
8  
9  }
10/* 緑の背景ボックスの上の画像を２つ重ねる */
11.relative2 {
12    position: relative;
13}
14/* 重ねた背景色緑の位置 */
15.absolute4 {
16    position: absolute;
17    margin-top: -10px;
18  height: 800px;
19  background-color: rgb(1, 224, 157);
20	
21	z-index: 10;
22  
23	
24}
25
26/* 重ねた画像Aの位置 */
27.absolute5 {
28    position: absolute;
29	
30	 top:50px;
31     right: 380px;/* ｐｘを小さくするほど右に行く。 */
32     
33	
34	bottom:30px;
35	z-index: 30;
36}
37
38/* 重ねた画像Bの位置 */
39.absolute6 {
40    position: absolute;
41	
42	top:50px;
43  left: 380px;/* ｐｘを大きくするほど右に行く。 */
44	bottom:30px;
45	z-index: 30;
46	
47}
48/* 画像A */  
49#gazouA{
50width:380px;
51height: 500px;
52
53
54}
55/* 画像B */
56#gazouB{
57width:380px;
58height: 500px;
59
60
61}
62
63 /* フェードイン用のCSS */
64
65  /* 右からフェードイン */
66  .slide-right {
67  opacity: 0;
68  transform: translate(20px, 0);
69  transition: all 1s ease-out;
70  }
71 
72/*並び変え*/
73.flex4{
74  display: flex;/* 画像の横に文字を配置する */
75  padding: 10px;
76  
77  margin: 0 auto;
78  justify-content: start;
79  align-items: center;
80}

0LPcoderesponsive2000orless.css

css
1/* 画面幅（2000px以下の時までの適応）指定 */
2@media screen and (max-width: 2000px){
3
4  /* 緑色の背景ボックス */
5     .box {
6    margin-top: -10px;
7     height: 750px;
8     background-color: rgb(1, 224, 157);
9     width: 80%;
10     margin: 0 auto;
11     
12     }
13   /* 緑の背景ボックスの上の画像を２つ重ねる */
14   .relative2 {
15       position: relative;
16   }
17   /* 重ねた背景色の位置 */
18   .absolute4 {
19       position: absolute;
20       margin-top: -10px;
21     height: 800px;
22     background-color: rgb(1, 224, 157);
23     z-index: 10;
24       
25   }
26   
27   /* 重ねた画像Aの位置 */
28   .absolute5 {
29       position: absolute;
30       
31        top:50px;
32        right: 380px;/* ｐｘを小さくするほど右に行く。 */
33       bottom:30px;
34       z-index: 30;
35       
36   }
37   
38   /* 重ねた画像Bの位置 */
39   .absolute6 {
40       position: absolute;
41       
42        top:50px;
43        left: 380px;/* ｐｘを大きくするほど右に行く。 */   
44       bottom:30px;
45       z-index: 30;
46       
47   }
48   /* 画像A */  
49   #gazouA{
50   width:380px;
51   height: 500px;
52   
53   
54   }
55   /* 画像B */
56   #gazouB{
57   width:380px;
58   height: 500px;
59  
60   }
61    
62   
63    /* フェードイン用のCSS */
64  
65     /* 右からフェードイン */
66     .slide-right {
67     opacity: 0;
68     transform: translate(20px, 0);
69     transition: all 1s ease-out;
70     }
71
72     /*並び変え*/
73.flex4{
74  display: flex;/* 画像の横に文字を配置する */
75  padding: 10px;
76  
77  margin: 0 auto;
78  justify-content: start;
79  align-items: center;
80} 
81    }
82

css
1/* 画面幅（400px以下の時までの適応）指定 */
2@media screen and (max-width: 400px){
3
4/* 緑色の背景ボックス */
5  .box {
6 margin-top: -10px;
7  height: 670px;
8  background-color: rgb(1, 224, 157);
9  width: 100%;
10  margin: 0 auto;
11  display: block;
12  
13  
14  }
15/* 緑の背景ボックスの上の画像を２つ重ねる */
16.relative2 {
17    position: relative;
18}
19/* 重ねた背景色緑の位置 */
20.absolute4 {
21    position: absolute;
22    margin-top: -10px;
23  height: 800px;
24  background-color: rgb(1, 224, 157);
25	
26	z-index: 10;
27  
28	
29}
30
31/* 重ねた画像Aの位置 */
32.absolute5 {
33    position: absolute;
34	
35	
36	
37}
38
39/* 重ねた画像Bの位置 */
40.absolute6 {
41    position: absolute;
42	
43	
44	
45}
46/* 画像A */  
47#gazouA{
48width:270px;
49height: 300px;
50
51text-align: center;
52
53}
54/* 画像B */
55#gazouB{
56width:270px;
57height: 300px;
58
59text-align: center;
60
61}
62 
63
64 /* フェードイン用のCSS */
65
66  /* 右からフェードイン */
67  .slide-right {
68  opacity: 0;
69  transform: translate(20px, 0);
70  transition: all 1s ease-out;
71  }
72 /* 画像の横に文字を配置する */
73 .flex4{
74       
75  /* 並べ変えスマホ縦に配置 */ 
76 flex-direction: column;
77 display: flex;
78
79 margin: 0 auto;
80 justify-content: start;
81 align-items: center;
82 }
83}