Link to home
Start Free TrialLog in
Avatar of Richard Korts
Richard KortsFlag for United States of America

asked on

Bootstrap - eliminate rows if device width narrow

Please look at www.rkassoc.org/Lakos_config/basin.php

We want to completely eliminate the circled numbers, connecting lines & captions underneath at the bottom if the device width is 640 or less.

These are presently defined as follows (using bootstrap classes):

<div class="row">
      <div class="col-sm-6 col-xs-6 text-right nopadding"><img src="images/nav_left_onrr.png"></div>
      <div class="col-sm-6 col-xs-6 nopadding"><img src="images/nav_right_blue.png"></div>
</div>      
<div class="row">
      <div class="col-sm-6 col-xs-6 text-right nopadding"><img class="img-responsive" src="images/nav_left_captions.png" align="right"></div>
      <div class="col-sm-6 col-xs-6 nopadding"><img class="img-responsive" src="images/nav_right_captions.png"></div>
</div>      

How can we do that?

Thanks
ASKER CERTIFIED SOLUTION
Avatar of Russ Suter
Russ Suter

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Richard Korts

ASKER

Perfect!!
The media query is already a part of bootstrap. Just add the "hidden-xs" class to the top level div
Agree with Rob on this - the correct way to do this in Bootstrap is to use the "hidden-??" classes already included in the framework.
Thanks Julian.

Richard,I'm not after points here, just want you to know the way to do it using bootstrap :)