Медиа-запросы скрывают DIV через максимальную ширину ⇐ CSS

[Anonymous]

http://jsbin.com/regovusu/1/edit
Я создавал WYSIWYG-конструктор веб-сайтов, и сегодня у меня было немного времени, чтобы включить медиа-запросы.
У меня есть 3 настройки div: .mobile, .tablet и .desktop.
План такой, если браузер 400 пикселей или ниже, чтобы отобразить элемент div .mobile, от 400 пикселей до 600 пикселей, чтобы отобразить .tablet, и 600 пикселей +, чтобы отобразить .desktop
Почему он не отвечает?
CSS:
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;
}
}


Подробнее здесь: https://stackoverflow.com/questions/231 ... -max-width