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 make balloon textbook talking style using css

    How to detect and deliver separate CSS files for mobile devices?

    How can I make 3 circles with a different radius “stick” together? (with example image)

    How to overlap other elements using resizable element?

    CSS - How to center nested divs?

    Jquery: How to make the content showup below the navigation bar when the anchor link is clicked?

    Bootstrap: Only Show Fixed Footer In Larger Screens?

    How to reference an embedded image from CSS?

    How to make this table's height equal to the middle td's height

    How do I get text in my html page to display features using the css stylesheet?

    How do you make the colour of a h1 tag to change if the user hovers over the body in css and html?

    How to make Flexbox span multiple lines?

    How to use media queries in an effective way? [closed]

    How can I do to merge font attributes in css

    How to contol a CSS property with Javascript

    how to animate with CSS?

    jQuery .animate() sets display:none, how to avoid?

    Use ::after selector to show line number but also display a element next to it when hovering over the containing table td cell

    How can I get the
    div to properly wrap my two buttons?

    Position: fixed Background DIV with images makes scrolling slow: How to make conditional CSS rules for browser-compatibility?

    How to reposition a div

    How do I modify this script to use different colors?

    How can I add a red border to this box (an a tag) when the mouse is on (hover) the box?

    How to change font-color for disabled input?

    How can I force a table made using the CSS display: table to fit within a minimum height?

    How to make header background 100% height?

    How to keep images locked at specific height within Bootstrap container

    How to identify unused css definitions [closed]

    How to replace only the text of this element with jQuery?

    How to create an ActionImage from a CSS Sprite