Responsive layout, box positions - css

Question

I'm building a responsive site. The basic version has 2 columns, each column features a few boxes:
The 1 column layout shold look like this:
A naive approach for the one column version would be to place everything from second column under column one...but I can't do that. I need to be able to pick boxes from both columns and place them in custom order.
The only way I can think of is via box duplication and hiding for desktop/mobile. Do you have any suggestions?
Thanks, Michal
UPDATE: Since this seems to be Isotope (and similar libraries related), I've created a new post here: Reordering boxes with Isotope

Answer 1

This is very nearly possible with some custom CSS. Unfortunately Bootstrap's default grid won't cater to your needs because items in either column have different heights.
Here's a basic example on JSBin (resize the output pane to see the elements stack).
There's a lot of custom CSS here which is unfortunate, but it works.
.col-right, .col-left {
width: 50%;
padding: 15px;
margin-bottom: 10px;
}
.col-left {
float: left;
clear: left;
height: 300px;
background: teal;
}
.col-right {
float: right;
clear: right;
height: 200px;
background: orange;
}
#media (max-width: 767px) {
.col-left, .col-right {
float: none;
width: auto;
}
}
I've added a simple breakpoint at 767px for demonstration. If you're using Bootstrap's LESS, you'll want to replace this with #screen-xs-max.
HTML
<div class="row">
<div class="col-left">A</div>
<div class="col-right">D</div>
<div class="col-left">B</div>
<div class="col-right">E</div>
<div class="col-right">F</div>
<div class="col-left">C</div>
<div class="col-right">G</div>
</div>
This works by using float: left or float: right for the left/right columns and clearing only the float for that column. It's not perfect, but it's the closest you're going to get without using a JavaScript library like Masonry.

Answer 2

Sounds like you should have a look into Isotope, seems to me it could help with what you are trying to achieve.
http://isotope.metafizzy.co
You could use Isotope and set up a one column layout.
You could also use Isotopes sorting to customise the order of your boxes on mobile.
http://isotope.metafizzy.co/sorting.html

Answer 3

Try this one?
<div style="float:left; width:50%; background: rgb(121, 82, 0);">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
</div>
<div style="float:left; width:50%; background: rgb(0, 0, 255);">
<div>F</div>
<div>G</div>
<div>H</div>
<div>I</div>
</div>