I think the best bet would be to use jquery to see if hidden-tablet is display:none then change the spans* in that row
John Brittain III Kannapolis, NC Programmer http://www.skem9.com Cell: 931-952-8700 On Sat, Jan 26, 2013 at 11:38 AM, reversible <[email protected]> wrote: > Hi folks, > I have the following snippet which works fine for a desktop: > > * <div class="row-fluid media-container">* > * <div class="span4 "> </div> > * > * <div class="span4 "> </div> > * > * <div class="span4 "> </div> > * > * </div>* > > the goal is to disable the third div inside the row when I am in a tablet, > so I did something like this > > *<div class="row-fluid media-container">* > * <div class="span4 "> </div> > * > * <div class="span4 "> </div> > * > * <div class="span4 hidden-tablet"> </div> > * > * </div>* > > I ended up with two divs with the span4 class, this is causing a white > space in my layout, what I really want is that the two first divs takes 50% > and 50%, in oder words I would like to end up with something like this > > *<div class="row-fluid media-container">* > * <div class="span6 "> </div> > * > * <div class="span6 "> </div> * > * </div>* > > do you know where can I find a clean approach for this? is it better to > override the CSS rules or just change the span class using JS? > > thanks in advance > > -- > > >
