twitter bootstrap overlay force new row on small screen

Question

I have a div that is an overlay on the slider div. On big screens this is fine. but on small screens i want the overlay div to appear underneath the slider but i have no idea how to do this. Any help is welcome.

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
}

result example:

enter image description here http://jsfiddle.net/jonasvermeulen/4son0uv2/

currently its not above, its within so beneath must mean behind as in not visible — Brian Dillingham, Sep 07 '14 at 07:47
i added an image to show what i want to achieve. the blue block must be placed between slider and text — jonas vermeulen, Sep 07 '14 at 07:52
You'll need a media query to style that. Google it and add your CSS, the width for small devices within bootstrap is 768px — Brian Dillingham, Sep 07 '14 at 07:55
In order to create an overlay, the element is removed from normal flow. In your example, it gets positioned relative to its parent which, as far as my experience goes, somewhat breaks the responsive behavior. Would it be an option to size the overlay relative to parent instead of using absolute px dimensions? — Kris, Sep 07 '14 at 08:00
As an alternative solution, you might hide the div on certain screen sizes (http://stackoverflow.com/questions/19659726/twitter-bootstrap-hide-element-on-small-devices)and perhaps show another one below your slider when that happens (but with the same content) — Kris, Sep 07 '14 at 08:04
i went for the media queries solution. Kris solution is also a working approach, but i don't like duplicate content in my code. @Brian, you can add this as a solution if u want — jonas vermeulen, Sep 07 '14 at 08:24

score 1 · Accepted Answer · answered Sep 07 '14 at 17:13

Using a media query will allow you to specify CSS as bootstrap does for when the viewport is of mobile width. You can then position the element of interest however you'd like, overriding the absolute position with position: initial will cause it to fall under the #slider jsFiddle Demo

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

twitter bootstrap overlay force new row on small screen

1 Answers1