Twitter Bootstrap fixed footer on mobile devices - html

Question

I have this page that has a fixed footer and header http://magician-bombs-84382.bitballoon.com/
On the footer, I have 4 buttons but the buttons align vertically when the width resizes to less than that of large screens. I am making a page to fit mobile device within this range of media queries
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
The app I'm making will be locked to portrait view, so I'm not thinking of ever accessing the page on large screens.
After looking at the bootstrap.css file, I cannot seem to pinpoint the code responsible for arranging the buttons vertically instead of horizontally following the col-md-3 order available inside the class row.
How can I arrange the buttons horizontally? Removing the position: absolute for footer does not seem to solve it.
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}

Answer 1

Use .col-xs-3, it won't break on extra small screens.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-xs-3">
<button class="btn btn-primary">One</button>
</div>
<div class="col-xs-3">
<button class="btn btn-primary">One</button>
</div>
<div class="col-xs-3">
<button class="btn btn-primary">One</button>
</div>
<div class="col-xs-3">
<button class="btn btn-primary">One</button>
</div>
</div>
</div>
</footer>

Answer 2

It works fine and buttons don't hide also.
Fiddle demo
.footer {
bottom: 0;
width: 100%;
background-color: #f5f5f5;
}