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.
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..
col-sm-3 for desktop (4 columns)
col-xs-6 for tablets (2 columns)
col-???-12 for phone (1 columns)