Pull Bootstrap grid elements vertically - html

Question

I'm building a layout using Bootstrap 3 grids that should stack as follows:
Desktop:
1 | 2
1 | 2
- | 2
3 | 2
Mobile:
1
1
-
2
2
2
2
-
3
On another post I found a solution that floats the box2 to the right so that the grids stack correctly on the desktop. However, that only works when box2 is higher than box1. If it is not, box3 will show below box2 instead of box1. Is there any other way to stack these boxes as visualized above? All three boxes can have different heights and contain any number of lines of text, images, tables, etc.
http://jsfiddle.net/G9WPv/

Answer 1

This is very possible with CSS, and you can do this with Bootstrap's grid layout. In terms of solving this, you need to exploit the properties of right vs left float.
Demo: http://www.bootply.com/l0Flnma2Im
Consider the following sample. You'd expect this to show up 100% as intended on xs viewports, because each would be 100% width in the order you want. And, you'd expect it to show up as intended on md/lg browsers as well with the 1/3 on the left, but 2 on the right.
<div class="col-xs-12 col-md-6">
<div>1<br>1</div>
</div>
<div class="col-xs-12 col-md-6 pull-right">
<div>2<br>2<br>2<br>2<br>2</div>
</div>
<div class="col-xs-12 col-md-6">
<div>3</div>
</div>
Now, the only issue that arises is when the "1" block expands larger than the "2" block. When this happens, 3 appears on the right. Why is this happening? It happens because the float is simply trying to fill in the empty gap on the right. However, we can force it to always be on the left by using clear: left; to ensure nothing appears to the left of it.
.always-left {
clear: left;
}
The code now becomes:
<div class="col-xs-12 col-md-6">
<div>1<br>1</div>
</div>
<div class="col-xs-12 col-md-6 pull-right">
<div>2<br>2<br>2<br>2<br>2</div>
</div>
<div class="col-xs-12 col-md-6 always-left">
<div>3</div>
</div>

Answer 2

This is very possible to do using just media queries and some absolute positioning.
Look at this fiddle
You need to wrap your 3 divs inside a container.
essentially your css will look something like this.
.container {
width: 100%;
position: relative;
}
#box1 {
background-color: #d7d7d7;
width: 100%;
}
#box2 {
background-color: #e7e7e7;
width: 100%;
position: relative;
}
#box3 {
background-color: #f7f7f7;
width: 100%;
}
#media screen and (min-width: 700px) {
#box1, #box3 {
width: 40%;
}
#box2 {
width: 60%;
position: absolute;
top: 0;
right: 0;
}
}
The boxes can be of any size and on a mobile size screen they will stack in the correct order.
of course with the bootstrap gird system there might be a little tweaking involved to get it just right... but this is the essence of it.
Peace.