show/hide div based on browser size using ONLY css

Question

I am a trying to get some divs to show/hide based on browser size, using only css media queries... but nothing seems to be working... please help if you can and let me know what i'm doing wrong... thanks in advance!

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

}

and here's my 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

class name can't start with the digit. change it to e.g. x700,x490,x290 and it should work

Answer 2

class name cant be a number and cant be start with a number in css, here i changed class name its working good

http://jsfiddle.net/RtTsy/