jQueryを使用したドロップダウンリストの要素のレスポンシブデザインが縦に並ばない

<環境>
直接関係あるもの
bootstrap：bootstrap-grid.min.jsファイルのみでグリッドシステムのみ
jQuery：jquery-1.8.0.min.jsファイル使用
一応書いたもの（サーバーサイド）
django ver:3.2.5

<実現したい事>
ウィンドウが800px以上の時はヘッダーの要素を横に並べ、それ以下の時は縦に並べサイドバーに並べられ
右上にあるマークをクリックしたときに表示するというもの。

<現状>
レスポンシブデザインでウィンドウが800px以上の時はjQueryでcol-3クラスを追加して
グリッドシステムを反映させてるが、800px未満になるとcol-3クラスを削除して
サイドバーに縦並べにして表示・非表示は右上にあるマークで行おうとしているが
表示・非表示は問題ないが要素が横並びになってしまう。

<修正したい箇所>
サイバーにある項目を縦並びにしたい。

コード

html
1{% load static %}
2<!doctype html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <meta name="description" content="最新技術と自然との調和を目指す">
7    <meta name="viewport" content="width=device-width">
8    <link rel="shortcut icon" href="{% static 'img/favicon.iCo' %}" type="image/vnd.microsoft.icon">
9    <title>{% block title %}{% endblock %}</title>
10
11    <link rel="stylesheet" href="{% static 'css/bootstrap-grid.min.css' %}">
12    <link rel="stylesheet" href="{% static 'css/base.css' %}">
13    <script src="{% static 'js/vendor/jquery-1.8.0.min.js' %}"></script>
14    <!--<script src="{% static 'js/vendor/jquery-1.10.2.min.js' %}"></script>
15    <script src="{% static 'js/vendor/jquery-ui-1.10.3.custom.min.js' %}"></script>-->
16    <script src="{% static 'js/base.js' %}"></script>
17</head>
18
19<body id="top">
20	<header id="header">
21		<div id="headerWrap">
22            <h1><img src="{% static 'img/logoSundayfc.png' %}" height="80px" alt="logo"></h1>
23			<nav id="mainnav">
24				<p id="menuWrap"><a id="menu"><span id="menuBtn"></span></a></p>
25				<div class="panel">
26					<ul class="dropdwn row">
27						<li id="classList" class="col-3">
28                            <a class="kari">TOP</a>
29                            <ul class="dropdwn_menu">
30                                <li><a href="#">CLUB TOP PAGE</a></li>
31                                <li><a href="#">MOVIE</a></li>
32                            </ul>
33                        </li>
34						<li id="classList" class="col-3">
35                            <a class="kari">FOOTSAL・SCHOOL</a>
36                            <ul class="dropdwn_menu">
37                                <li><a href="#">CLUB TOP PAGE</a></li>
38                                <li><a href="#">MOVIE</a></li>
39                            </ul>
40                        </li>
41						<li id="classList" class="col-3"><a href="#">MATCH RESULT</a></li>
42						<li id="classList" class="col-3"><a href="#">PHOTO GALLERY</a></li>
43					</ul>
44				</div>
45			</nav>
46		</div>
47	</header>
48    <!--<script>
49        $(function() {
50    $('.dropdwn_menu').onclick(function() {
51        $('.dropdwn_menu').slideToggle(1000);
52    });
53});
54    </script>-->
55    {% block contents %}{% endblock %}
56	<footer id="footer">
57		Copyright(c) 2022 SUNDAY FC. All Rights Reserved. Design by CHACON<!-- ←クレジット表記を外す場合はシリアルキーが必要です http://f-tpl.com/credit/ -->
58	</footer>
59    
60</body>
61</html>

javascript
1/*This code is js code for respnsive-sideber below.*/
2	var
3	  winW = $(window).width(),
4		winH = $(window).height(),
5		nav = $('#mainnav ul a'),
6		curPos = $(this).scrollTop();
7	
8	if (winW > 800){
9		var headerH =0;
10	}
11	else{
12		var headerH =70;
13	}
14	/*this code is not need , so it erase this code.
15	$(nav).on('click', function(){
16  	var $el = $(this),
17		id = $el.attr('href');
18 		$('html, body').animate({
19   		scrollTop: $(id).offset().top - headerH
20 		}, 500);
21		if (winW < 890){
22			$('#menuWrap').next().slideToggle();
23			$('#menuBtn').removeClass('close');
24		}
25 		return false;
26	});*/
27	
28	$('.panel').hide();
29	$('#menuWrap').toggle(function(){
30		$(this).next().slideToggle();
31		$('#menuBtn').toggleClass('close');
32	},
33	function(){
34		$(this).next().slideToggle();
35		$('#menuBtn').removeClass('close');
36	});
37
38    /*This code is js code for dropdown-list below.*/
39    $('.kari').on('click',function(event){
40        $(event.target).siblings().slideToggle(500);
41    });
42
43    /*This code is js code for dropdown-list below.*/
44    $(window).on('load resize',function(){
45        if(800<=winW){
46            $('#classList').addClass('col-3');
47        }else{
48            $('#classList').removeClass('col-3');
49        }
50    });
51});

css
1@charset "UTF-8";
2@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
3@import url(https://fonts.googleapis.com/css?family=Pacifico);
4
5
6/* reset */
7body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
8address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
9ul{list-style:none;}
10table{border-collapse:collapse;border-spacing:0;}
11caption,th{text-align:left;}
12q:before,q:after{content:'';}
13object,embed{vertical-align:top;}
14legend{display:none;}
15h1,h2,h3,h4,h5,h6{font-size:100%;}
16img,abbr,acronym,fieldset{border:0;}
17
18body{
19	font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
20	font-weight: 300;
21	-webkit-text-size-adjust:100%;
22	overflow-x: hidden;
23	color: #000;
24	background: #fff;
25}
26
27a{
28	color: #0066ff;
29	text-decoration: none;
30}
31
32a:hover, .active{
33  text-decoration: underline;
34}
35
36a:active, a:focus,input:active, input:focus{outline:0;}
37
38
39/* ヘッダー
40------------------------------------------------------------*/
41#header{
42	text-align: center;
43}
44
45#header h1{
46	padding-top: 60px;
47}
48/*
49#mainnav li{
50	color: #000;
51    
52}*/
53
54#mainnav a{
55	color: #000;
56    font-family: Impact;
57}
58
59#mainImg{
60	position: relative;
61  overflow: hidden;
62  width: 100%;
63  height: 528px;
64}
65
66#mainImg img{
67	position: absolute;
68  left: 50%;
69	max-width: 1280px;
70  width: 1280px;
71  height: 528px;
72  margin-left: -640px;
73}
74
75.dropdwn_menu{
76    display: none;
77}
78
79/* 共通
80------------------------------------------------------------*/
81
82img{
83	max-width: 100%;
84	height: auto;
85}
86
87section{
88	clear:both;
89	padding-top: 70px;
90}
91
92section h2{
93	font-family: 'Pacifico', cursive;
94	width: 60%;
95	margin: 0 auto 40px;
96	font-size: 22px;
97	font-weight:normal;
98	text-align: center;
99	background: url(../img/borderBlack.png) repeat-x 0 50%;
100	background-size: 1px 1px;
101}
102
103section h2 span {
104	background: #fff;
105	padding: 0 80px;
106}
107
108.inner{
109	width: 94%;
110	margin: 0 auto;
111	padding-bottom: 50px;
112}
113
114.innerS{
115	width: 60%;
116	margin: 0 auto;
117	padding-bottom: 80px;
118}
119
120
121/* RESPONSIVE 設定
122------------------------------------------------------------*/
123/*1200px以上のスクリーン*/
124@media only screen and (min-width: 1200px){
125	.inner{
126		width: 1024px;
127	}
128}
129
130@media only screen and (min-width: 800px){
131	body{
132		font-size:14px;
133	}
134	
135  a#menu{
136		display:none;
137	}	
138
139	.panel{
140		display:block !important;
141	}
142
143	#mainnav li{
144		display: inline-block;
145		padding: 100px 25px;
146		font-size: 15px;
147	}
148
149    .dropdwn_menu li{
150        display:block;
151    }
152	
153	
154	/* SEC03 PROJECT
155	-----------------*/
156	.col3{
157		text-align: center;
158	}
159
160	.col3 li{
161		display: inline-block;
162		width: 28%;
163		padding: 0 2.5% 50px;
164		margin-bottom: 0;
165		vertical-align: top;
166		text-align: left;
167	}
168	
169  #footer{
170		padding: 30px 10px 70px 0;
171	}
172}
173
174/*480px以上のスクリーンの時適応*/
175@media only screen and (min-width: 641px){
176	.col2 li{
177		width: 60%;
178		vertical-align: top;
179	}
180	.col2 li:first-child{
181		width: 35%;
182		padding-right: 4%;
183	}
184}
185/*640px未満のスクリーンの時適応*/
186@media only screen and (max-width: 640px){
187	.innerS{
188		width: 94%;
189		padding-bottom: 70px;
190	}
191	.col3 li{
192		line-height: 1.7;
193	}
194	.col3 img{
195		margin: 0 auto;
196	}
197	.col3 .img{
198		padding: 30px;
199		margin-bottom: 20px;
200	}
201	#gallery li{
202		float: none;
203		width: 100%;
204	}
205	#map iframe{
206		width: 96% !important;
207		left: 2%;
208	}
209	#sec04_02{
210		padding: 50px 20px;
211	}
212}
213
214@media only screen and (max-width: 799px){
215	#header{
216		position: fixed;
217		width: 100%;
218		z-index: 500;
219	}
220	
221	#headerWrap{
222		position: relative;
223		width: 100%;
224		height: 70px;
225		background: #fff;
226		border-bottom: 1px solid #ccc;
227	}
228	
229	#header h1{
230		padding-top: 10px;
231	}
232	
233	#header h1 img{
234		margin-top: 3px;
235		max-height: 45px;
236		width: auto !important;
237	}
238
239  a#menu{
240  	display: inline-block;
241  	position: relative;
242  	width: 40px;
243  	height: 40px;
244  	margin: 10px;
245	}
246
247	#menuBtn{
248  	display: block;
249  	position: absolute;
250  	top: 60%;
251  	left: 50%;
252  	width: 18px;
253  	height: 2px;
254  	margin: -1px 0 0 -7px;
255  	background: #000;
256  	transition: .2s;
257	}
258
259	#menuBtn:before, #menuBtn:after{
260  	display: block;
261  	content: "";
262  	position: absolute;
263  	top: 50%;
264  	left: 0;
265  	width: 18px;
266  	height: 2px;
267  	background: #000;
268  	transition: .3s;
269	}
270
271	#menuBtn:before{
272  	margin-top: -7px;
273	}
274
275	#menuBtn:after{
276  	margin-top: 5px;
277	}
278
279	a#menu .close{
280  	background: transparent;
281	}
282
283	a#menu .close:before, a#menu .close:after{
284  	margin-top: 0;
285	}
286
287	a#menu .close:before{
288  	transform: rotate(-45deg);
289  	-webkit-transform: rotate(-45deg);
290	}
291
292	a#menu .close:after{
293  	transform: rotate(-135deg);
294  	-webkit-transform: rotate(-135deg);
295	}
296
297	.panel{
298		width: 100%;
299		display: none;
300		overflow: hidden;
301		position: relative;
302		left: 0;
303		top: 0;
304		z-index: 100;
305	}
306
307	#mainnav{
308		position: absolute;
309		top: 0;
310		width: 100%;
311		text-align: right;
312		z-index:500;
313	}
314
315	#mainnav ul{
316		border-bottom: 1px solid #ccc;
317		background: #fff;
318		text-align: left;
319	}
320
321	#mainnav li a{
322		position: relative;
323		display:block;
324		padding:15px 25px;
325		border-bottom: 1px solid #ccc;
326		color: #000;
327		font-weight: 400;
328	}
329
330	#mainnav li a:before{
331		display: block;
332		content: "";
333		position: absolute;
334		top: 50%;
335		left: 5px;
336		width: 6px;
337		height: 6px;
338		margin: -4px 0 0 0;
339		border-top: solid 2px #000;
340		border-right: solid 2px #000;
341		-webkit-transform: rotate(45deg);
342		transform: rotate(45deg);
343	}
344	#mainImg{
345		padding-top: 60px;
346		z-index: -100;
347	}
348	.col3 li{
349		margin: 50px auto 0 auto;
350		display: block;
351	}
352	section{
353		padding-top: 50px;
354	}
355	section h2{
356		margin: 0 auto 20px;
357	}
358	section h2 span {
359		padding: 0 30px;
360	}
361    .dropdwn_menu li{
362        display: block;
363    }
364}