Hello Phil, I would do this a little differently (not necessarely better):
Instead of messing up with the media queries, I would change this using js. It's just matter of getting the screen width and it's changes and changing the span3 to span6 classes. Regards Em quinta-feira, 8 de novembro de 2012 05h03min24s UTC-2, Phil Doughty escreveu: > > 4 thumbs/columns in a row changes to 2 thumbs/columns(instead of 1 big > column) in a row when < 768px or smaller: > This was hurting my brain for months. This is the best way I have been > able to do it. > If anyone can offer a better way, please share. > > Phil Doughty Web Designer / GuitaristPhone: +971 50 8879936 > > <!doctype html> > <head> > <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"; > rel="stylesheet"> > <link href=" > http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css"; > rel="stylesheet"> > <style> > /* ========================== > Media Queries - max-width: 767px > ========================== */ > @media(max-width:767px) { > div.*thmb*.row div.span3{ > float: left; > width: 48%; > padding-right:2%; > } > } /* End of layout 480px - 767px */ > > /* =========================== > Media Queries - max-width: 480px > =========================== */ > @media(max-width:480px) { > div.*thmb*.row div.span3{ > width: 48%; > padding-right:2%; > } > } /* End of layout 480px - 767px */ > </style> > </head> > <body> > <div class="container"> > <h1>4 Pups. Made to be stacked 2 in a row when < 768px</h1> > <div class="row *thmb*"> > <div class="span3"><img src="http://placedog.com/g/270/360"; ><br />In > Boots</div> > <div class="span3"><img src="http://placedog.com/g/270/360"; ><br > />Scratchy</div> > <div class="span3"><img src="http://placedog.com/g/270/360"; ><br > />Hello</div> > <div class="span3"><img src="http://placedog.com/g/270/360"; ><br > />Cheshire</div> > </div> > </div> > </body> > </html> >
