update jan 2014
See also: https://github.com/twbs/bootstrap/issues/10203
update 21 aug 2013
Since Twitter Bootstrap 3 RC2 the col-* mentioned below has been renamed to xs-col-*
There are four grid classes now: xs-col-* (mobile, never stacks), col-sm-* (tablet, stacks below 768px), col-md-* (laptops,stacks below 992 px) and col-lg-* (desktop, stacks below 1200px).
update
In my previous answer i use this table from the recent docs:
[old image removed]
When i test this values if found something different:
- “col-xs-*” will be applied always (never stacks)
- “col-sm-*” will be applied between 768 and higher (992px) (stacks at 767)
- “col-lg-*” will be applied between 992 and higher (stacks at 991)
In variables.less you will find:
// Media queries breakpoints
// --------------------------------------------------
// Tiny screen / phone
@screen-tiny: 480px;
@screen-phone: @screen-tiny;
// Small screen / tablet
@screen-small: 768px;
@screen-tablet: @screen-small;
// Medium screen / desktop
@screen-medium: 992px;
@screen-desktop: @screen-medium;
But there doesn’t seem to be a breakpoint at 480px (or as @fred_ says the grid is missing the col-ts-* (tiny to small) set of classes). See also: https://github.com/twbs/bootstrap/issues/9746
To set the stacking point at 480px you will have to recompile yours css. Set @screen-small to 480px; and define your cols with:
<div style="background-color: red" class="col-sm-4"> after that.
Note this will change @grid-float-breakpoint also cause it is defined as @grid-float-breakpoint: @screen-tablet;.
When adding a row to the container i don’t find problems with padding.
Or try: http://www.bootply.com/70212 it will stack below 480px by adding a media query (the javascript is used for illustration only)
previous answer
From now Twitter’s Bootstrap defines three grids: Tiny grid for Phones (<480px), Small grid for Tablets (<768px) and the Medium-large grid for Destkops (>768px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 768 pixels screen width. So does the Small grid below 480 pixels and the tiny grid never stacks.
With your “col-4” prefix the grid will never stack. So remove “col-4” to let your grid stack below the 480px. This also will remove padding cause is stacks now.
See also: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ and Writing Twitter’s Bootstrap with upgrading to v3 in mind