How to use bootstrap grid system so it will stack below 480px

Question

I've been trying to solved this issue, but can't seem to find any news regarding this. Have read lots of old posts where people are "modding" the files and making their own col-ms (medium-small) that stacks between 480-768.

All these post are back from 2013, so is there any trick i can do to make it stack at 480px? I want to make my 3 columns i have created in my footer, to stack below 480px or between 480-768. Have tried different col-xs-4 and md you name it, but then it stacks at 768, or even not stacking at all.

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 resevation</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> 

So is there an easy way to do it?, hope someone can help.

Answer 1

Mikkel Hi there. To have it stack at 480px just add a media breakpoint and create a class of col-xxs-12 and set this class to 100% width.
You also have to use the Bootstrap class of col-xs-4 and not col-sm-4.

Remove the border, I added this just for the image demo.

Have a look at the Fiddle.

@media(max-width:480px)  {     
.col-xxs-12 {
    width: 100%;
}
}