SO @media example

Bootstap base config

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<div class="container">

<div id="navigation-div" class="span6 offset2">

    <div id="navigation-nophone" class="visible-desktop">
        <ul class="menu clearfix">
            <li class="active"><a href="">Home</a></li>
            <li><a href="">News</a></li>
            <li><a href="holaa"></a></li>
            <li><a href="">Demoes</a></li>
            <li><a href="">Features</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </div>

    <div id="navigation-phone" class="visible-phone">
        <ul class="menu">
            <li class="active"><a href="">Home</a></li>
            <li><a href="">News</a></li>
            <li><a href="">Demoes</a></li>
            <li><a href="">Features</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </div>

</div>
  
</div> <!-- end container -->

CSS

/* tablet */

@media (max-width: 767px) {
body{
  background-color:aqua;
}
}

/* regular desktop */

@media (min-width: 980px) {
  body{
   background-color: green;
}

}

/* wide tablet */

@media (min-width: 768px) and (max-width: 979px) {
 body{
   background-color:pink; 
}
}


/* regular desktop */

@media (min-width: 980px) {
  body{
   background-color: green;
}

}


/* wide desktop */
@media (min-width: 1200px) { 
 body{
   background-color: olive;
}
}