Columns are not being responsive in mobile view - html

Question

I'm developing e-commerce site it is a college project, on that site I have filters and list of products. It works fine on laptop but when I open it on mobile, then the cards of product list comes under the filter. But I want to make it responsive and both columns should increase and decrease their size respective to screen size. I'm new in web-designing, please help me.
The class m is an empty class, i have just used it because with using it it gives nice look to all the contents.
#media screen and (max-width: 480px) {
section.slider {
padding-top: 0%;
}
.mini-menu .sub>ul {
height: 0;
overflow: hidden;
background: #fff;
}
.mini-menu .sub>ul>li>a {
font-family: sans-serif;
color: #FEFEFE;
font-size: 12px;
display: block;
text-decoration: none;
padding: .7em 1em;
text-transform: capitalize;
font-style: normal;
letter-spacing: 1px;
}
.cards {
background: #fff;
border-radius: 2px;
display: inline-block;
height: 50%;
margin: 1rem;
width: 97%;
position: relative;
text-align: center;
}
<div class="m">
<div class="col-md-2">
<div class="menu">
<div class="mini-menu">
<ul>
<li class="sub">
RAM<span style="float:right;"><i class="fa fa-chevron-down"></i></span>
<ul>
<li>
<input class="filter" data-filter=".check1" type="checkbox" id="checkbox1">
<label class="checkbox-label" for="checkbox1" style="color: #212121;">Less than 512 MB</label>
</li>
<li>
<input class="filter" data-filter=".check1" type="checkbox" id="checkbox1">
<label class="checkbox-label" for="checkbox1" style="color: #212121;">512 MB - 1 GB</label>
</li>
</ul>
</li>
<li class="sub">
BRAND<span style="float:right;"><i class="fa fa-chevron-down"></i></span>
<ul>
<li>
<input class="filter" data-filter=".check1" type="checkbox" id="checkbox1">
<label class="checkbox-label" for="checkbox1" style="color: #212121;">HP</label>
</li>
<li>
<input class="filter" data-filter=".check1" type="checkbox" id="checkbox1">
<label class="checkbox-label" for="checkbox1" style="color: #212121;">Dell</label>
</li>
</ul>
</li>
<li class="sub">
CUSTOMER RATINGS<span style="float:right;"><i class="fa fa-chevron-down"></i></span>
<ul>
<li>
<input class="filter" data-filter=".check1" type="checkbox" id="checkbox1">
<label class="checkbox-label" for="checkbox1" style="color: #212121;">4 <i class="fa fa-star"></i> & above</label>
</li>
</ul>
</li>
</ul>
</div>
<div class="menu-price menu-item">
<div class="header-item">Price<span style="float:right;"><i class="fa fa-chevron-down"></i></span></div>
<p>
<input type="text" readonly id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</div>
</div>
</div>
<div class="col-md-10">
<div class="cards card4">
<div class="carousel slide" id="myCarousel2" data-ride="carousel" data-interval="000" data-pause="hover">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3">
<img src="computers/img/lenovo.png" alt=" " class="img-responsive" />
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel2" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel2" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="clearfix"></div>
</div>
<div class="cards card4">
<div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="000" data-pause="hover">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3">
<img src="computers/img/dell.jpeg" alt=" " class="img-responsive" />
<p>
<br> Dell Core i3 6th Gen <br> Rs 29,990 <br>
</p>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>