bootstrap columns for iphone and ipad are the same, how to get another size

Question

I have been developing a bootstrap website and I have found 1 very major flaw, it treats tablet size the same as phone size, the col-xs-x (for 768px and under) applies to iphone and ipad alike.

http://www.think.darkstarmedia.net/

With my design I use 2 columns for desktop and tablet size, once in the phone size I want it to be 1 column but bootstrap has no way to do that

I know I could create 2 copies of the exact same content and use media queries (e.g. display:none, display:block) and swap them out for under 480 pixels, but that seems like it goes against the whole point of using something like bootstrap..

Is there anyway to use bootstrap's columns to accomplish what I want..

e.g.
col-sm-3 for desktop (4 columns) col-xs-6 for tablets (2 columns) col-???-12 for phone (1 columns)

Or please clarify if I am missing the obvious

Answer 1

According to their documentation on the Grid Options you should be using the 'xs' classes for phones, 'sm' for tablets, and 'md' classes for desktop.

Answer 2

The solution was to add more media queries and extra styles

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px){

.callout-wrap, .vertical_photo {
    margin-top:10px;}   

.banner-left, .banner-right, .content-left-side, .content-right-side{
width:100%;

}

.border_drop_bg {
margin-top:10px;
width:100%;}

.vertical_photo {
display:none;}  


 }