hiện/ẩn div dựa trên kích thước trình duyệt bằng cách sử dụng chỉ css?

Question

Tôi đang cố gắng thu thập một số div để hiển thị/ẩn dựa trên kích thước trình duyệt, chỉ sử dụng truy vấn phương tiện css ... nhưng không có gì có vẻ hoạt động ... hãy trợ giúp nếu bạn có thể và cho tôi biết tôi đang làm gì sai ... cảm ơn trước!

heres css của tôi ..

@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;} 

} 

và đây là html của tôi

<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

tên lớp không thể bắt đầu với chữ số. thay đổi nó thành ví dụ X700, x490, x290 và nó cũng làm việc

Answer 2

class name không thể là một số lượng và không thể được bắt đầu với một số trong css, ở đây tôi đã thay đổi lớp tên của nó làm việc tốt

http://jsfiddle.net/RtTsy/