Twitter Bootstrap 3 - 3 even columns on 765 - responsive-design

Question

Using Twitter BS3 for the first time and I am trying to achieve 3 equal columns on all viewports larger than 320px wide (iPhone, lets say). On a viewport of 320 and less I want my columns to stack vertically.
Looking at the grid system in the docs, I can see that I can set the flow of the grid system by using the following classes
Max container width None (auto) 728px 940px 1170px
Class prefix .col- .col-sm- .col-lg-
The problem with the above seems to be that you can only control the layout of the columns on anything above 728 pixels. But what if I want 3 equal columns side by side on anything above 320 and not their predefined 728 pixels?
A good example of what I am looking for can be found on the Jetstrap homepage.
The three blue circles retain the side by side layout until you are on a 320 px wide viewport.
My version of this starts to stack vertically at around 728 pixels.

Answer 1

You could use a #media query to override how Bootstrap normally handles the "tiny" grid .col-4..
3 columns HTML..
<div class="row">
<div class="col-sm-4 col-4"></div>
<div class="col-sm-4 col-4"></div>
<div class="col-sm-4 col-4"></div>
</div>
CSS media query for less than 320px to change .col-4 to 100% width..
#media (max-width: 320px) {
.col-4 {
width:100%;
}
}
Demo: http://bootply.com/73952