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||         |


| 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:

<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="">
#container {
    width: 100%;
.first {
    background-color: blue;
    height: 300px;
.second {
    height: 600px;
    background-color: green;
.third {
    background-color: red;
    height: 300px;
    <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>

    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