responsive layout with Bootstrap,.visible-phone not working

Question

Trying to hide two banners when users are using phone, but using the classs such as .visible-phone or visible-desktop not working.

I then searched and thought maybe by adding the .less and less.js would solve the issue but failed either.

Code in HTML:

<link type="text/css" rel="stylesheet" href="/css/bootstrap.min.css"  />
<link type="text/css" rel="stylesheet" href="/css/site.css"  />
<link type='text/css' href='/js/jquery.simplemodal.css' rel='stylesheet' media='screen' />
<link href="/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet/less" type="text/css" href="css/less/responsive.less"> 

<script type="text/javascript" src="/js/jquery.js" ></script>
<script type="text/javascript" src="/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="/js/site.js" ></script>
<script type='text/javascript' src='/js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='/js/less.min.js'></script>  

... I need to hide the banners when view on phones:

<div class="hidden-phone">

    <div id="banner0" class="hidden-phone">            
        <div class="container-fluid">
             <div id="index_slider"> 
                <div class="banner-product">   
                   <div class="mask">
                        <div class="banner-text">

                           <h1>...</h1>
                           <br>
                           <h5>...</h5>


                              <div class="banner-button">
                              <strong><a href="/download.html" class="btn btn-success btn-large" style="color:white">...</a>
                              </strong>
                              </div> 
                        </div>
                    </div>
                </div>
            </div> 
       </div> 
    </div>



    <div id="banner1" class="hidden-phone">            
        <div class="container-fluid">
             <div id="index_slider"> 
                <div class="banner-product">   
                   <div class="uploadmask">
                    <div class="banner-text">

                       <h1>...<br>
                        </h1>
                       <br>
                       <h5>...</h5>


                          <div class="banner-button">
                          <strong><a href="/submit.html" class="btn btn-primary btn-large" style="color:white">...</a>
                          </strong>
                          </div> 
                </div>
           </div>
        </div>
     </div>
   </div>
</div> 

... I need to show the video only when it is on desktop:

<div class="visible-desktop">

                   <p align=center><a href="/demo.html">View Demo</a></p>
                   <br>

            </div>
            </div>

There are scripts binding on the banners, would this be the issue?

<script type="text/javascript">
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;   
     }
   })   
}

</script>

Answer 1

Did you try just puting the display property to none when he is on phone?

In css you could do

/* Phone */
@media only screen and (max-width: 760px) {
  .hidden-phone{
   display: none;
   }
}

Just adapt to your classes and it should be enough for what you are asking i think