केवल सीएसएस का उपयोग कर ब्राउज़र आकार के आधार पर div को दिखाएं/छुपाएं?

Question

मैं केवल कुछ सीएसएस मीडिया प्रश्नों का उपयोग करके ब्राउजर आकार के आधार पर दिखाने/छिपाने के लिए कुछ divs प्राप्त करने का प्रयास कर रहा हूं ... लेकिन कुछ भी काम नहीं कर रहा है ... कृपया मदद करें अगर आप कर सकते हैं और मुझे बताएं कि मैं क्या कर रहा हूं गलत ... अग्रिम धन्यवाद!

heres मेरी सीएसएस ..

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

} 

और यहाँ मेरी एचटीएमएल

<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

वर्ग के नाम अंक के साथ शुरू नहीं कर सकते है। इसे बदलें x700, x490, x290 और यह काम करना चाहिए

Answer 2

class name नहीं कर सकते एक नंबर हो सकता है और सीएसएस में एक नंबर के साथ शुरू नहीं जा सकता है, यहाँ मैं वर्ग के नाम अपने अच्छे काम कर

http://jsfiddle.net/RtTsy/