让我的jQuery手风琴响应

Question

我已经创建了这个jQuery手风琴，并希望在较小的屏幕上做出响应。我知道有一种方法可以使用CSS媒体查询来实现此响应，但我想知道是否有更好的方法使其使用JS响应。我也希望这些标签在较小的屏幕上相互叠加。任何人都可以帮助我。

另外，请随意提出可以改进此代码的任何内容。

$(document).ready(function(){
	
	var tabButton = ".allContainer .tabsList .tab-wrapper .tabButton";
	var tabButtonCurrent = ".allContainer .tabsList .tab-wrapper > .curr";
	var tabContent = ".allContainer .tabsList .tab-content .curr";
    var tabContentParent = ".allContainer .tabsList .tab-content";
	
	$(tabButton).on('click', function(){
		
		$(tabButtonCurrent).removeClass('curr');
		$(this).addClass('curr');

		var panelId = $(this).attr('rel');

		$(tabContent).hide(500, showClickedSlider);
        
		function showClickedSlider(){
		$(this).removeClass('curr');
		
		$(panelId).show(500, function(){
		$(this).addClass('curr');
		});
		}
	});
});

.tabList {
    width:100%;
}
.tab-wrapper {
    float:left;
    margin-right:10px;
    background-color:olivedrab;
    height:200px;
}
.tabButton {
	float:left;
	margin-right:1%;
    min-width: 50px;
    height:200px;
	background-color:orange;
	cursor:pointer;
}
.tab-content {
    overflow:hidden;
    float:left;
    width:70%;
}
.tab-content > div {
    display: none;
	width:350px;
}
.tab-content .curr {
    display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="allContainer">
	
	<div class="tabsList">
	
        <div class="tab-wrapper">
            <div class="tabButton curr" data-u="#tab01" rel="#tab01">tab1</div>
                <div class="tab-content">
                    <div class="curr" id="tab01">content 01</div>
                </div>
        </div>
			
		
		 <div class="tab-wrapper">
            <div class="tabButton" rel="#tab02">tab2</div>
                <div class="tab-content">
                    <div id="tab02">content 02</div>
                </div>
        </div>
		
		
		 <div class="tab-wrapper">
            <div class="tabButton" rel="#tab03">tab3</div>
                <div class="tab-content">
                    <div id="tab03">content 03</div>
                </div>
        </div>
		
		
	</div>


</div>