How to move elements inside the left column of a 2 column css grid above and below the main content area on collapse


Tags: css,twitter-bootstrap,scaffolding

Problem :

I am looking for a way to resposition elements in the left column of a 2 column (bootstrap) grid to move above / below the main content area on small sized devices.

Something like:

|------||---------|
|aside1||   main  |
|------||         |
|------||         |
|aside2||         |
|------||---------|

To

|--------|
| aside1 |
|--------|
|--------|    
|        |
| main   |
|--------|
|--------|
| aside2 |
|--------|

I'd like to use CSS only and prevent having to duplicate html. What would be the most elegant solution for this?



Solution :

Here you go: http://jsfiddle.net/nn3vy1wr/

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style>
#container {
    width: 100%;
}
.first {
    background-color: blue;
    height: 300px;
}
.second {
    height: 600px;
    background-color: green;
}
.third {
    background-color: red;
    height: 300px;
}
    </style>
</head>
<body>
    <div id="container">
        <div class="row">
            <div class="col-sm-6 col-xs-12 first">First</div>
            <div class="col-sm-6 col-xs-12 pull-right second">Second</div>
            <div class="col-sm-6 col-xs-12 third">Third</div>
        </div>
    </div>
</body>
</html>

    CSS Howto..

    How to get the click position on a page when a css zoom is involved

    How to get the type of the DOM element to fix the CSS Selector

    Do I need to use float:clear to have content show where I want it to show?

    How to apply css using ng-class in angularjs

    How to align text vertical CSS

    How to properly add divs inside another div so the original design doesn't break?

    How to make an interactive sidebar with jQuery and CSS3?

    How to trigger CSS “hover state” using Javascript? [duplicate]

    How to bring DIV2 to top WRT DIV1?

    Clickable dropdowns - How do they work?

    How to Achieve Word Wrap Effect With Children Divs

    CSS: How to get a positioned div to resize horizontally with window instead of getting scrollbars

    How to delay Hide/Show events until Iframe loads after a submit

    How do I get text to wrap to not break out of the box using CSS?

    How to style my HTML form using CSS

    how do i prevent respond.js reading my retina display media query?

    How to get color property from CSS with jQuery?

    How to add a second slideshow on the same webpage

    How to use CSS hover inside html-tag?

    How can I change the inline style text color of an element without the ability to add a class or id?

    How can I target an id=“last_name[]_field” with css

    How to auto adjust wrapper height when padding is applied to inner elements

    how to style margins between items in a
    list?

    How to Add CSS Reference to .NET SyndicationFeed?

    How to get a JavaFX XYchart to work with user defined CSS?

    How can

    be centered and justified?

    How to change an image on click using CSS alone?

    css: how to put text between two images side by side?

    How to style this triangle on a circular image?

    How to do CSS attribute selector with title~= that has to contain a space?