title: responsive layout with Bootstrap,.visible-phone not working
body: <p>Trying to hide two banners when users are using phone, but using the classs such as .visible-phone or visible-desktop not working.</p>
  
  <p>I then searched and thought maybe by adding the .less and less.js would solve the issue but failed either. </p>
  
  <p>Code in HTML:</p>
  
  <pre><code>&lt;link type="text/css" rel="stylesheet" href="/css/bootstrap.min.css"  /&gt;
  &lt;link type="text/css" rel="stylesheet" href="/css/site.css"  /&gt;
  &lt;link type='text/css' href='/js/jquery.simplemodal.css' rel='stylesheet' media='screen' /&gt;
  &lt;link href="/css/bootstrap-responsive.css" rel="stylesheet"&gt;
  &lt;link rel="stylesheet/less" type="text/css" href="css/less/responsive.less"&gt; 
  
  &lt;script type="text/javascript" src="/js/jquery.js" &gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/js/bootstrap.min.js" &gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/js/site.js" &gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='/js/jquery.simplemodal.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='/js/less.min.js'&gt;&lt;/script&gt;  
  </code></pre>
  
  <p>... I need to hide the banners when view on phones:</p>
  
  <pre><code>&lt;div class="hidden-phone"&gt;
  
      &lt;div id="banner0" class="hidden-phone"&gt;            
          &lt;div class="container-fluid"&gt;
               &lt;div id="index_slider"&gt; 
                  &lt;div class="banner-product"&gt;   
                     &lt;div class="mask"&gt;
                          &lt;div class="banner-text"&gt;
  
                             &lt;h1&gt;...&lt;/h1&gt;
                             &lt;br&gt;
                             &lt;h5&gt;...&lt;/h5&gt;
  
  
                                &lt;div class="banner-button"&gt;
                                &lt;strong&gt;&lt;a href="/download.html" class="btn btn-success btn-large" style="color:white"&gt;...&lt;/a&gt;
                                &lt;/strong&gt;
                                &lt;/div&gt; 
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt; 
         &lt;/div&gt; 
      &lt;/div&gt;
  
  
  
      &lt;div id="banner1" class="hidden-phone"&gt;            
          &lt;div class="container-fluid"&gt;
               &lt;div id="index_slider"&gt; 
                  &lt;div class="banner-product"&gt;   
                     &lt;div class="uploadmask"&gt;
                      &lt;div class="banner-text"&gt;
  
                         &lt;h1&gt;...&lt;br&gt;
                          &lt;/h1&gt;
                         &lt;br&gt;
                         &lt;h5&gt;...&lt;/h5&gt;
  
  
                            &lt;div class="banner-button"&gt;
                            &lt;strong&gt;&lt;a href="/submit.html" class="btn btn-primary btn-large" style="color:white"&gt;...&lt;/a&gt;
                            &lt;/strong&gt;
                            &lt;/div&gt; 
                  &lt;/div&gt;
             &lt;/div&gt;
          &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p></p>
  
  <p>... I need to show the video only when it is on desktop:</p>
  
  <pre><code>&lt;div class="visible-desktop"&gt;
  </code></pre>
  
  <p>
                      <br>
                        
                              
                              
                               
                              
                               
                        </p>
  
  <pre><code>                   &lt;p align=center&gt;&lt;a href="/demo.html"&gt;View Demo&lt;/a&gt;&lt;/p&gt;
                     &lt;br&gt;
  
              &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>There are scripts binding on the banners, would this be the issue? </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function bindMouse(){   
      var _o1=document.getElementById("online");
      var _o2=document.getElementById("banner1");
      var _o3=document.getElementById("desktop");
      var _o4=document.getElementById("banner0");
        _o1.onmousemove=function(){
           _o2.style.display="block"; 
           _o4.style.display="none";
        }; 
        _o3.onmousemove=function(){
           _o4.style.display="block"; 
           _o2.style.display="none";
        }
  }
  bindMouse();
  
  $(document).ready(function(){
      loadImage("/images/Backbanner.jpg",function(img){$("#banner0").css("background","#b9c0d0 url(" + img.src + ") top center no-repeat");});
      loadImage("/images/banner-another.jpg",function(img){$("#banner1").css("background","#000000 url(" + img.src + ") top center no-repeat");});
  })
  
  
  
  function loadImage(url, callback) {     
      var img = new Image(); 
      img.src = url;     
  
  $(img).load(function(){
       if (this.complete||this.readyState=="complete") {
          callback(img);     
          return;   
       }
     })   
  }
  
  &lt;/script&gt;
  </code></pre>