I am writing [a website page](http://dive.abi.org), I want this:

When the screen width is too small,say you are viewing via mobile phone. I want the page only have text on it (except the navbar), no background images, and the font-size should be adjust to fix the screen size.

Now the html code have many classes, so one of my thought is to disable these classes(there are many) when browsing via mobile phone.

Some of my code:

```
<section class="box">
   <img src="images/background2.jpg" class="img-responsive hidden-xs" alt="">
   <div class="carousel-caption text-background">
        <h1>Do you love to scuba dive? Are you looking for your next bid dive event?</h1>
        <h5>Look no further. Join ABI and other experienced divers throughout the year as we travel to amazing ocean resort destinations for state of the art diving experiences. Each trip will include
        multiple dives operated by experienced dive companies. All proceeds from these diving excursions will benefit the ABI Endowment Fund<a href="http://endowment.abi.org" target="_blank"> endowment.abi.org</a> 
        Do something you love while supporting the ABI Endowment Fund. Get more information about ABI's upcoming dive excursions.</h5>
   </div>
</section>

```