使用@mediaquery隐藏/显示div

Question

当用户查看网站w mobile时，我有一个3 col幻灯片并隐藏2 col。这是有效的，我尝试添加另一个col然后决定不这样做。从那时起，这不起作用，我似乎无法理解为什么。

我的代码：

<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

我会这样做

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