afficher / masquer div en fonction de la taille du navigateur en utilisant UNIQUEMENT css?

Je suis d'essayer d'obtenir quelques divs pour afficher/masquer basé sur la taille du navigateur, en utilisant uniquement css media queries... mais rien ne semble fonctionner... s'il vous plaît aider si vous le pouvez et laissez-moi savoir ce que je fais mal... merci d'avance!

heres mon 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;}

}

et voici mon code 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>

source d'informationauteur JStormThaKid