滑出div问题

Question

我有一个幻灯片div，在桌面视图中我必须保持打开状态，但我希望它能够在响应式视图中关闭并能够滑出一次。我已经尝试了媒体查询，但这没有多大帮助，div在响应时最终没有滑出，但在桌面视图上工作完全正常。有什么想法吗？

.slide-out-div {
    font-family:Arial;
    line-height:50%;
    z-index: 10;
    background-color: rgba(67, 67, 67, 0.88);
    padding: 9px 0;
    margin-bottom: 10px;    
    padding-bottom: 0px;
    width: 221px;
    height:410px;
    left:0;
    top: 106px;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    text-align:left;
      }     

      fieldset{
    margin: 0 0;
    padding: 0.35em 0.625em 0.75em;
    }
    legend{padding:2px 5px;}    
    form div.col{clear:none;}form div.first{clear:both;}
    form div{overflow:hidden;}

    input[type="text"], input[type="password"], textarea, .field, .area, select{
        border:1px solid #aaa;
        padding:5px;
        background:#fff;
        line-height:1em;
        margin:0;
    }

@media only screen and (max-width: 1350px) {
    .slide-out-div {
        left:-216px !important;
    }
}

@media only screen and (max-device-width: 1350px) {
    .slide-out-div {
        left:-216px !important;
    }
}


@media only screen and (max-width: 660px) {
    .slide-out-div {
        left:-216px !important;
    }
}

@media only screen and (max-device-width: 660px) {
    .slide-out-div {
        left:-216px !important;
    }
}


@media only screen and (max-width: 480px) {
    .slide-out-div {
        left:-216px !important;
    }
}

@media only screen and (max-device-width: 480px) {
    .slide-out-div {
        left:-216px !important;
    }
}

这就是css的样子。