I have been grappling with this issue, but unfortunately, there seems to be a lack of information on how to resolve it. I have gone through numerous old posts where individuals are "modding" the files and creating their own col-ms (medium-small) that stack between 480-768.
All these posts date back to 2013, so I am wondering if there is a workaround to make it stack at 480px. I'm aiming to make the three columns I've created in my footer stack below 480px or between 480-768px. I have experimented with different col-xs-4 and md configurations, but they either stack at 768px or don't stack at all.
Here is my code:
<div class="container">
<div class="row">
<div class="footerpadding">
<!-- Contact us form -->
<div class="col-4 col-sm-4">
<div class="footerheadline">
<h5>ABOUT US</h5>
<hr />
</div>
<div class="footercontent">
<a runat="server" href="~/company.aspx">Company</a><br />
<a runat="server" href="~/press.aspx">Press</a><br />
<a runat="server" href="~/aboutus.aspx">About Us</a><br />
<a runat="server" href="~/media.aspx">Media</a><br />
<a runat="server" href="~/gallery.aspx">Gallery</a><br />
</div>
</div>
<div class="col-4 col-sm-4">
<div class="footerheadline">
<h5>CONTACT & SUPPORT</h5>
<hr />
</div>
<div class="footercontent">
<a runat="server" href="~/Support.aspx">Customer Support</a><br />
<a runat="server" href="~/questions.aspx">Questions & Answers</a><br />
<a runat="server" href="~/cancel.aspx">Cancel reservation</a>
</div>
</div>
<!-- Follow -->
<div class="col-4 col-sm-4">
<div class="footerheadline">
<h5>FOLLOW US!</h5>
<hr />
</div>
<div class="footercontent">
<ul>
<li><a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li><a href="#"><i class="fa fa-youtube"></i></a>
</li>
<li><a href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Is there a simple way to achieve this? Any assistance would be greatly appreciated.