css - Twitter Bootstrap mobile only columns -
is possible make 'mobile only' columns in boostrap? i.e. row of 4 becoming row of 2 on smaller screens (3 * span4s becoming 2 * span6?). know can hide elements mobile adding .hidden-phone.
zurb foundation has phone-two etc classes this. http://www.zurb.com/article/859/fancy-mobile-layouts-with-the-foundation-
will need write own media queries this?
bootstrap not have built in equivalent of classes asking about.
here's idea started if want write own: http://jsfiddle.net/panchroma/g6prs/
css
@media (max-width: 767px) { .row-fluid.phone-two .span3 { width: 48%; margin-left: 4%; float:left; } .row-fluid.phone-two > .span3:nth-child(odd){ margin-left: 0; } } html
<div class="container"> <div class="row-fluid phone-two"> <div class="span3"> span3 </div> <div class="span3"> span3 </div> <div class="span3"> phone-two span3 </div> <div class="span3"> span3 </div> </div> </div> hope enought going!
Comments
Post a Comment