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

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