Não mostrar div em caso de resoluções menores

Eu tenho um footer que ocupa 100% do layout e nele há 4 widgets. Eu gostaria que toda essa div não fosse mostrada em caso de telas menores. Na verdade, todo esse layout está responsivo, só o footer que não, pois na medida que vai diminuindo a tela o conteúdo dos widgets estouram.

#footer_bg {clear:both;width:100%; height:250px; margin:0; background:url(images/bg_main.png) repeat; list-style:none; font-size:90%;}
.footer_widgets {width:80%; margin:0 auto; padding:10px 0;}
.footer1 {float:left; width:30%; border-right:1px solid #999; min-height:230px; overflow:hidden;}
.footer2 {float:left; width:30%; padding-left:10px; border-right:1px solid #999; min-height:230px;}
.footer3 {float:left; width:20%; padding-left:10px; min-height:230px; border-right:1px solid #999;}
.footer4 {float:right; width:15%;}

O ideal seria que em caso de estourar na tela fosse mostrado um outro conteudo, se alguém tiver uma ideia como faço isso...

valeu!!!