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

вот мой 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>