Page not displaying correctly in Mobile view

Question

I am working on a project where products are to be displayed. the page is divided in two parts namely sidebar which contains menus and other side products which diplays 3 products in each row. in fullscreen it perfectly works but in mobile view the products doesnt display vertically. Below is the code.

ASP Code

Sidebar Code

<div class="side-bar col-md-3">
<div class="search-hotel">
<h3 class="agileits-sear-head">
Search Here..</h3>
<form action="#" method="post">
<input type="search" placeholder="Product name..." name="search" required="">
<input type="submit" value=" ">
</form>
</div>
<!-- food preference -->
<div class="left-side">
<h3 class="agileits-sear-head">
Category</h3>
<ul id="accordion" class="accordion">
<asp:DataList ID="dlCategory" runat="server" RepeatColumns="1" RepeatDirection="Vertical"
OnItemDataBound="dlCategory_ItemDataBound">
<ItemTemplate>
<li>
<div class="link">
<%#Eval("Category_Name") %><i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<asp:Repeater ID="rptProducts" runat="server">
<ItemTemplate>
<li>
<asp:HyperLink ID="hypProduct" runat="server" NavigateUrl='<%# GetUrl(Eval("PID"))%>'
Text='<%#Eval("Product_Name") %>'> </asp:HyperLink>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</li>
</ItemTemplate>
</asp:DataList>
</ul>
</div>
<!-- //food preference -->
</div>

Other side products code

<div class="agileinfo-ads-display col-md-9 w3l-rightpro">
<div class="wrapper">
<div class="product-sec1">
<asp:DataList ID="dlistProduct" runat="server" RepeatDirection="Horizontal" RepeatColumns="3" >
<ItemTemplate>
<div class="col-sm-3">
<div class="men-pro-item simpleCart_shelfItem">
<div class="men-thumb-item">
<img src="images/k1.jpg" alt="">
</div>
<div class="item-info-product ">
<h4>
<a href="single.html">Zeeba Basmati Rice</a>
</h4>
<div class="snipcart-details top_brand_home_details item_add single-item hvr-outline-out">
<form action="#" method="post">
<fieldset>
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value=" " />
<input type="hidden" name="item_name" value="Zeeba Basmati Rice - 5 KG" />
<input type="hidden" name="amount" value="950.00" />
<input type="hidden" name="discount_amount" value="1.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="return" value=" " />
<input type="hidden" name="cancel_return" value=" " />
<input type="submit" name="submit" value="Add to cart" class="button" />
</fieldset>
</form>
</div>
</div>
</div>
</div>
</ItemTemplate>
</asp:DataList>
<div class="clearfix"></div>
</div>

Output pictures : Full display and mobile display

 

Mobile View