показать/скрыть div на основе размера браузера, используя ТОЛЬКО css?

Question

Я пытаюсь получить некоторые divs, чтобы показать/скрыть на основе размера браузера, используя только css-медиа-запросы ... но ничего похожего не работает ... пожалуйста, помогите, если вы можете и дайте мне знать, что я делаю неправильно ... спасибо заранее!

Heres мой CSS ..

@media all and (max-width: 959px) { 

    .content .700{display:block;} 
    .content .490{display:none;} 
    .content .290{display:none;} 

} 

@media all and (max-width: 720px) { 

    .content .700{display:none;} 
    .content .490{display:block;} 
    .content .290{display:none;} 

} 

@media all and (max-width: 479px) { 

    .content .700{display:none;} 
    .content .490{display:none;} 
    .content .290{display:block;} 

} 

и вот мой HTML

<div class="content"> 
    <div class="700">this is the content for desktop</div> 
    <div class="490">this is the content for tablet</div> 
    <div class="290">this is the content for mobile</div> 
</div> 

Answer 1

имя класса не может начинаться с цифры. изменить его, например. x700, x490, X290 и он должен работать

Answer 2

class name косяка быть рядом и не может быть начинаться с цифрой в CSS, здесь я изменил имя класса его хорошо работает

http://jsfiddle.net/RtTsy/