Jquery 基于文档宽度的div滑块

我有一个div，当点击时会滑出（#关闭栏）。这工作正常，但我希望它只在文档宽度为480px时被激发的其他函数中可见，但在文档宽度高于480px时被隐藏

这是jsfiddle上的

$(function () {
    $(window).resize(ChangeDiv);
    $(window).trigger("resize");   
});

function ChangeDiv() {
    var width = $(window).width();
    if (width <= 480) {
        $("#menu").after($("#header"));
        $("#headerRight form").prependTo($("#footer"));
    } else {
        $("#header").after($("#menu"));
        $("#footer form").appendTo($("#headerRight"));
    }
}

var speed = 300;
        $('#close-bar').on('click', function(){

            var $$ = $(this),
                panelWidth = $('#hiddenPanel').outerWidth();

            if( $$.is('.myButton') ){
                $('#hiddenPanel').animate({right:0}, speed);
                $$.removeClass('myButton')
            } else {
                $('#hiddenPanel').animate({right:-panelWidth}, speed);
                $$.addClass('myButton')
            }

        });

$（函数（）{
$（窗口）。调整大小（ChangeDiv）；
$（窗口）。触发器（“调整大小”）；
});
函数ChangeDiv（）{
变量宽度=$（窗口）.width（）；
如果（width我认为通过CSS在480px（）以上隐藏它就足够了，对吗

所以，当窗口宽度小于480px时，是否要隐藏
#关闭栏
并禁止滑出
#关闭栏
，当窗口宽度等于或大于480px时，是否允许滑出
#关闭栏
？是否要这样做？谢谢，我看到了您的建议，添加了一个媒体查询，但我认为您可能有误让我明白，你的解决方案否定了我的脚本所操纵的其他div的效果。来自@Giorgio的回答是可行的。
@media only screen and (min-width:480px) 
{
    #close-bar {
        display:none;
    }
}