Hide/Show div with @mediaquery

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