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
--
