I thought this would be (relatively) easy, but from the answers it seems harder than I anticipated.
Perhaps even impossible!
GOAL
I\'d
If you can figure out the height of the first few elements on the left side (assuming it starts with the left side) before the right side then this would be possible: http://jsfiddle.net/n467un0c/29/
.left {
float:none;
background: coral;
margin-bottom: 5px;
}
.right {
float:right;
background: mediumaquamarine;
margin-bottom: 5px;
position: relative;
top: -46px; /** this value should be the height of the elements added together (including the margins) on the left side BEFORE the first element on the right side... in this case it would be 'left one' and 'left two' before 'right one' **/
}
@media (max-width:400px){
.left, .right {
width:100%;
}
}
@media (min-width:400px){
.left {
width: 60%;
margin-right: 10%;
}
.right {
width: 30%;
clear: right;
}