Medienabfragen verbergen DIV über max-width ⇐ CSS

[Anonymous]

http://jsbin.com/regovusu/1/edit
Ich habe einen WYSIWYG-Website-Designer erstellt und hatte heute etwas Zeit, Medienabfragen zu integrieren.
Ich habe 3 Divs eingerichtet, .mobile, .tablet und .desktop.
Der Plan ist, wenn der Browser 400 Pixel oder ist niedriger, um das .mobile-Div anzuzeigen, 400px bis 600px, um .tablet anzuzeigen, und 600px +, um .desktop anzuzeigen
Warum reagiert das nicht?
Das CSS:

Code: Select all

body {
margin: 0;
padding: 0;
}

.mobile, .tablet {
display: none;
}

@media all and (max-width:400px) {
.tablet, .desktop {
display: none;
}
}

@media all and (max-width:600px) {
.mobile, .desktop {
display: none;
}
}