how to remove div if window is smaller then 600px - html

Question

do you know how to remove div when it´s inside of another div? I need to remove div "2" and this isn´t working:
#media all and (max-width: 600px)
{
#zmiz { display:none; }
}
<div class="row clearfix">
<div class="fwImage col span_6">
<div class="ahoj" style="position: absolute; width: 80%;">
<div class="col span_4 logo_shift" style="line-height: 21px; ">
<h1>Certifikát</h1>
<p>)ily linde.Yo.</p>
<p>Sc.</p>
<p>St Gic, ad.</p>
</div>
</div>
<div id="gallery-t-group" class="royalSlider rsDefaultInv">
<div id="zmiz">
<a class="rsImg" href="gal/blank.png"><img class="rsTmb" width="56" height="56"src="gal/p.png" /></a>
</div>
<a class="rsImg" href="gal/certifikat1.jpg"><img class="rsTmb" width="56" height="56"src="gal/certifikat2.jpg" /></a>
<a class="rsImg" href="../img/full-width/medium/2.jpg"><img class="rsTmb" width="56" height="56" src="gal/kabel.jpg" /></a>
</div>
</div>
</div>
Thanks

Answer 1

Your id must start with a letter (at least for this CSS problem, even if theoretically in HTML5 it's not mandatory). It works if you fix that :
<div id="a1" class="1_5">
<div id="a2">
<a class="2_5" href="a.png"><img class="3" width="1" height="2" src="b.png" />AAA</a>
</div>
</div>
#media all and (max-width: 600px) {
#a2 {display:none;}
}
http://jsbin.com/ehuker/1/edit
Note that even if now HTML5 ids are supposed to be less constrained, there are still many tools, old browsers, and so on which don't work well if you don't follow the old HTML4 naming rules.

Answer 2

Your code works on fiddle. Also, tidied it up for you:
<div class="row clearfix">
<div class="fwImage col span_6">
<div class="ahoj" style="position: absolute; width: 80%;">
<div class="col span_4 logo_shift" style="line-height: 21px; ">
<h1>Certifikát</h1>
<p>)ily linde.Yo.</p>
<p>Sc.</p>
<p>St Gic, ad.</p>
</div>
</div>
<div id="gallery-t-group" class="royalSlider rsDefaultInv">
<div id="zmiz">
<a class="rsImg" href="gal/blank.png"><img class="rsTmb" width="56" height="56"src="gal/p.png" /></a>
</div>
<a class="rsImg" href="gal/certifikat1.jpg"><img class="rsTmb" width="56" height="56"src="gal/certifikat2.jpg" /></a>
<a class="rsImg" href="../img/full-width/medium/2.jpg"><img class="rsTmb" width="56" height="56" src="gal/kabel.jpg" /></a>
</div>
</div>
</div>
Most likely, what's happening is you're overwriting this display:none; rule somewhere else in your CSS or your JavaScript.
If you post a link to your code, or your full code and full CSS, I will take a look.

Answer 3

Edit: This answer addressed a sample code snippet which had div id="2".
Dystroy's answer is correct: by specification an ID cannot start with a number; but if for some reason you can't change the ID (maybe all your JavaScript is dependent on it or something), this workaround does work:
CSS
---
#media all and (max-width: 600px) {
[id='2'] {
display: none;
}
}
HTML
----
<div id="a1" class="1_5">
<div id="a2">
<a class="2_5" href="a.png"><img class="3" width="1" height="2" src="b.png" />AAA</a>
</div>
</div>
Working demo here (drag the 'result' section wider to see the div appear).