title: bootstrap columns for iphone and ipad are the same, how to get another size
body: <p>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.</p>
  
  <p><a href="http://www.think.darkstarmedia.net/" rel="noreferrer">http://www.think.darkstarmedia.net/</a></p>
  
  <p>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</p>
  
  <p>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..</p>
  
  <p>Is there anyway  to use bootstrap's columns to accomplish what I want..</p>
  
  <p>e.g.<br>
  col-sm-3       for  desktop (4 columns)
  col-xs-6        for   tablets  (2 columns)
  col-???-12  for phone  (1 columns) </p>
  
  <p>Or please clarify if I am missing the obvious</p>