css - hacer - mostrar y ocultar texto en html

¿Mostrar/ocultar div según el tamaño del navegador usando SOLO css?

Question

Estoy tratando de obtener algunos divs para mostrar / ocultar según el tamaño del navegador, usando solo las consultas de medios css ... pero nada parece funcionar ... por favor, ayúdenme si pueden y háganme saber qué estoy haciendo mal. .. ¡gracias por adelantado!

Heres mi 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;}

}

y aqui esta mi 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

El nombre de la clase no puede comenzar con el dígito. cámbielo a, por ejemplo, x700, x490, x290 y debería funcionar

Answer 2

class name no puede ser un número y no se puede comenzar con un número en css, aquí cambié el nombre de la clase porque funciona correctamente

http://jsfiddle.net/RtTsy/