同じ大きさの横並び４つの画像を２列に２つずつ並べて表示させたいです。

実現したいこと
PC上で表示されている同じ大きさの横並び４つの画像をスマホの画面幅300px～600px程度の幅の時に横並び４つの画像を２列に２つずつ並べて表示させたいです。。
flexでPC上では横並び表示に設定しています。PCの設定はこれでOKです。

問題はスマホの設定で２列に２つずつ並べて表示させたいです**。付属画像１**のような感じです。
cssとresponsivecssは全く同じコードです。

付属画像１

試したこと
flexの折り返しコードflex-wrap: wrap; /* 折返し指定 */をresponsivecssにflex2{に追加して、#icon_list div {
width: 25%;
}
を追加してみても全然おかしな表示になり✖

li {のコードところにwidth: 10%または、width20%を追加
効果なし✖

常に付属画像２のようになる
付属画像２

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<meta name="robots" content="noindex,nofollow">
6	<title></title>
7
8	<meta http-equiv="X-UA-Compatible" content="IE=edge">
9	<meta name="viewport" content="width=device-width, initial-scale=1.0">
10   
11    <link rel="stylesheet" href="companyhp2.css">
12    <link rel="stylesheet" href="responsive.css">
13
14  	<script src="jquery-3.6.0.min.js"></script>
15    <style type="text/css">
16/* レスポンシブ対応で右に出る謎の余白を無くす */
17.wrapper {
18     overflow: hidden;
19 }
20
21    </style>
22
23
24</head>
25<body>
26<!--wrapperレスポンシブ対応で右に出る謎の余白を無くすbody全体に適応-->
27<div class="wrapper">
28
29
30
31<section id="service">
32    <h1 class="slide-bottom show">会社の4つのMission<span></span></h1>
33    <div>
34        <div class="icon_list">
35            <ul class="flex2">
36                <li class="slide-left show"><img src="icon_hearing.png" alt="改善"><p>改善</p></li>
37                <li class="slide-left show"><img src="icon_marketing.png" alt="開発"><p>開発</p></li>
38                <li class="slide-left  show"><img src="icon_planning.png" alt="向上"><p>向上</p></li>
39                <li class="slide-left  show"><img src="icon_support.png" alt="サポート"><p>サポート</p></li>
40            </ul>
41        </div>
42        <p class="slide-right show">全てのお客様の未来のために尽力する。</p>
43    </div>
44    </section>
45    <script>
46       //フェードイン用のコードです
47	$(function(){
48		$(window).on('load scroll', function() {
49			$(".show").each(function() {
50				var winScroll = $(window).scrollTop();
51				var winHeight = $(window).height();
52				var scrollPos = winScroll + (winHeight * 0.9);
53				if($(this).offset().top < scrollPos) {
54					$(this).css({opacity: 1, transform: 'translate(0, 0)'});
55				}
56			});
57		});
58	});
59	//フェードイン用のコードはここまでです
60
61
62</script>
63
64</div>
65</body>
66</html>
67

css
1/* 4つの画像を横並び配置display: flex; */
2.flex2 {
3	display: flex;
4}
5section {
6	overflow: hidden;
7	text-align: center;
8	padding: 1px 0;
9}
10
11 ul {
12	list-style: none;
13	margin: 0;
14	display: flex;
15 
16 }
17 li {
18	margin: 0 0 0 15px;
19	font-size: 14px;
20 }
21 /* 丸い画像の背面の色薄グレー */
22 #service {
23	background-color: #f7f7f7;
24 }
25 #service .icon_list {
26    display: block;
27    margin: 0 auto;
28    max-width: 800px;
29 }
30 #service ul {
31	margin: 0;padding: 0;
32    flex-direction: row;
33    justify-content: space-between;
34    flex-wrap: wrap;
35 }
36 #service ul li {
37    width: 25%;
38    margin: 0;
39    text-align: center;
40 }
41 #service ul li:nth-of-type(2){
42	transition-delay: .2s;
43 }
44 #service ul li:nth-of-type(3){
45	transition-delay: .4s;
46 }
47 #service ul li:nth-of-type(4){
48	transition-delay: .6s;
49 }
50 /* この記述で丸い画像が均等に４つ表示 */
51 #service ul li img {
52    max-width: 116px;
53 }
54 /* 丸い画像の下のテキストのスタイル */
55 #service ul li p {
56    font-size: 19px;
57    color: #f73f6f;
58 }
59 #service p {
60	margin: 0 0 40px 0;
61 }
62
63 /* sectionここまで *//* sectionここまで *//* sectionここまで *//* sectionここまで */
64
65
66
67
68 /* フェードイン用のCSS */
69 /* 下からフェードイン */
70 .slide-bottom {
71	opacity: 0;
72	transform: translate(0, 20px);
73	transition: all 1s ease-out;
74  }
75 /* 左からフェードイン */
76 .slide-left {
77	opacity: 0;
78	transform: translate(-20px, 0);
79	transition: all 1s ease-out;
80  }
81
82 /* 右からフェードイン */
83 .slide-right {
84	opacity: 0;
85	transform: translate(20px, 0);
86	transition: all 1s ease-out;
87 }
88
89 /* フェードイン用のCSSここまで */

responsivecss
1/* 画面幅（300px以上の時までの適応）指定 */
2@media screen and (min-width: 300px){
3
4/* 4つの画像を横並び配置display: flex; */
5.flex2 {
6	display: flex;
7}
8section {
9	overflow: hidden;
10	text-align: center;
11	padding: 1px 0;
12}
13
14 ul {
15	list-style: none;
16	margin: 0;
17	display: flex;
18 
19 }
20 li {
21	margin: 0 0 0 15px;
22	font-size: 14px;
23 }
24 /* 丸い画像の背面の色薄グレー */
25 #service {
26	background-color: #f7f7f7;
27 }
28 #service .icon_list {
29    display: block;
30    margin: 0 auto;
31    max-width: 800px;
32 }
33 #service ul {
34	margin: 0;padding: 0;
35    flex-direction: row;
36    justify-content: space-between;
37    flex-wrap: wrap;
38 }
39 #service ul li {
40    width: 25%;
41    margin: 0;
42    text-align: center;
43 }
44 #service ul li:nth-of-type(2){
45	transition-delay: .2s;
46 }
47 #service ul li:nth-of-type(3){
48	transition-delay: .4s;
49 }
50 #service ul li:nth-of-type(4){
51	transition-delay: .6s;
52 }
53 /* この記述で丸い画像が均等に４つ表示 */
54 #service ul li img {
55    max-width: 116px;
56 }
57 /* 丸い画像の下のテキストのスタイル */
58 #service ul li p {
59    font-size: 19px;
60    color: #f73f6f;
61 }
62 #service p {
63	margin: 0 0 40px 0;
64 }
65
66 /* sectionここまで *//* sectionここまで *//* sectionここまで *//* sectionここまで */
67
68
69
70
71 /* フェードイン用のCSS */
72 /* 下からフェードイン */
73 .slide-bottom {
74	opacity: 0;
75	transform: translate(0, 20px);
76	transition: all 1s ease-out;
77  }
78 /* 左からフェードイン */
79 .slide-left {
80	opacity: 0;
81	transform: translate(-20px, 0);
82	transition: all 1s ease-out;
83  }
84
85 /* 右からフェードイン */
86 .slide-right {
87	opacity: 0;
88	transform: translate(20px, 0);
89	transition: all 1s ease-out;
90 }
91
92 /* フェードイン用のCSSここまで */