css display:hidden을 사용해서 조건을 만들어 사용합니다.

제로나라님 답변에 태클은 아니구요,

display:none 과 display:hidden 은 매우 다릅니다.

둘다 특정 element 가 보이지 않게 되는 것은 같지만, display:hidden 은 단지 눈에만 보이지 않을 뿐 자리를 차지 합니다. 

그래서 반응형으로 레이아웃을 짤때 display:none 을 사용하지 display:hidden 을 쓰는 경우를 보지 못했습니다.

공간이 협소해서 필요없는걸 빼버리는게 목적인데, display: hidden 은 눈에만 보이지 않지, 공간은 계속 차지하니까요...

function set_resize() {
var $wrapper = $('#wrapper'); //CSS가 바뀔 최상위 Wrapper
var className = 'test';  // 대표 클래스명
var contentAreaWidth = $(window).width();
naviW = $(".naviBg").width();
// 해상도별 클래스 셋팅 class='test_1200'
if (contentAreaWidth > 720) {
$wrapper.removeClass().addClass(className + '_1200');
}
// 웹 최소 사이즈일때 class='test_800'
else {
$wrapper.removeClass().addClass(className + '_800');
}
}

// 윈도우 리사이즈
$(window).resize(function () {
set_resize();
});


css
.test_1200 #wrapper .menu {display:block}
.test_800 #wrapper .menu {display:none}