Hide/Show div with #mediaquery - css

Question

I have a 3 col slideshow and hide 2 col when the user views the site w mobile. This was working and I tried adding another col and then decided not to. Since then this is not working, and I can't seem to see why.
My code:
<div id="rightCol">
<div class="slideshowR">
<img src="../images/slideshow/kettle.jpg">
<img src="../images/slideshow/zucchini-flower.jpg">
<img src="../images/slideshow/truffle.jpg">
</div>
</div>
CSS:
.slideshowR {
height: 370px;
width: 250px;
margin: auto;
}
#leftCol {
width: 205px;
float: left;
margin: 0;
padding: 0;
display: none;
}
#centerCol {
width: 150px;
float: left;
margin: 0;
padding-left: 10px;
display: none;
}
#rightCol {
width: 250px;
float: left;
margin: 0;
padding-left: 10px;
}
#media only screen and (min-width: 769px) {
#leftCol {
display: block !important;
}
#centerCol {
display: block !important;
}
#rightCol {
}
}

Answer 1

I would just do this
#leftCol {
width: 205px;
float: left;
margin: 0;
padding: 0;
}
#centerCol {
width: 150px;
float: left;
margin: 0;
padding-left: 10px;
}
#rightCol {
width: 250px;
float: left;
margin: 0;
padding-left: 10px;
}
/* hide center and left in mobile */
#media only screen and (max-width: 769px) {
#leftCol, #centerCol {
display: none;
}
}