twitter bootstrap overlay在小屏幕上强制新行

Question

我有一个div，它是滑块div上的叠加层。在大屏幕上这很好。但在小屏幕上我希望叠加div显示在滑块下方，但我不知道如何做到这一点。 欢迎任何帮助。

HTML：

 <div id="header" class="col-md-12">
    <div id="slider" class="col-md-12"></div>    
    <div id="overlay"></div>
 </div>
 <div id="content">bla bla text</div>

的CSS：

#header{
    background-color:red;

}
#slider{
    background-color:green;
    height:200px;
}
#overlay{
    position:absolute;
    top:20px;
    right:30px;
    height:160px;
    width:200px;
    background-color:blue
}

结果示例：

http://jsfiddle.net/jonasvermeulen/4son0uv2/

Answer 1

使用媒体查询将允许您在视口具有移动宽度时指定CSS作为引导程序。 然后你可以根据自己的喜好定位感兴趣的元素，用位置覆盖绝对位置：initial会使它落在#slider jsFiddle Demo

之下

@media screen and (max-width: 768px){
    #overlay {
        position: initial;
    }
}