Bootstrap как спрятать вертикальный блок

Есть вертикальный блок(категории), хотелось бы чтобы этот блок скрывался при маленьких экранах, но появлялась кнопка при нажатий которой этот блок появлялся справа(как vk.com на телефонах).

html:

     <label class="slide glyphicon glyphicon-triangle-left visible-sm visible-xs"></label>
 <div id="rbar" class="visible-lg visible-md col-lg-3 col-md-3 col-sm-3" >
     <?php categories() ?> 
</div>

jquery

var r=$("#rbar");
var w=$(window).width();
if(w<970){
    r.removeClass("visible-lg visible-md col-lg-3 col-md-3 col-sm-3");
    r.addClass("visible-sm visible-xs rslide container");
    $(window).resize(function () { 
        if(w>970){
            r.removeClass("visible-sm visible-xs rslide container");
            r.addClass("visible-lg visible-md col-lg-3 col-md-3 col-sm-3");
        }else if(w<970){
            r.removeClass("visible-sm visible-xs rslide container");
            r.addClass("visible-lg visible-md col-lg-3 col-md-3 col-sm-3").animate({right:'0px'},0);
        }
    }); 
}else if(w>970){
    $(window).resize(function () { 
       if(w<970){
            r.removeClass("visible-lg visible-md col-lg-3 col-md-3 col-sm-3");
            r.addClass("visible-sm visible-xs rslide container");
        }
    }); 
}