CSS, Responsive, Make floating boxes stack up

Question

I want to create a responsive layout where there are two columns, left and right. On smaller screens the boxes on the left has to move in to certain positions. This works great with my code but the problem is that on large screens there is a gap on the right side between the boxes.

How can I solve it?

The idea and the problem

JSFIDDLE

When you look at the following jsfiddle, you see that it works for the small screen, but the problems dont move up on large screen. I know the way I do it is wrong but how can I get to this desired result with CSS?

http://jsfiddle.net/7rnum9xk/

.main{
    width:65%;
    height:125px;
    margin-bottom:10px;
    float:left;
}
.small{
    width:35%;
    height:25px;
    float:left;
    margin-bottom:5px;
}

@media screen and (max-width: 692px)   {
    .main, .small{
        width:100%;   
        float:none;
    }    
}

Answer 1

try this code DEMO

.main{
    width:65%;
    height:125px;
    margin-bottom:10px;
   float:left; 
    display: inline-block;
}
.small{
    width:35%;
    height:25px;
    /* float:left; */
    display:inline-block;
    margin-bottom:5px;
}

@media screen and (max-width: 692px)   {
    .main, .small{
        width:100%;   
        float:none;
    }

}

/* colors */
.main{background:#d0d0d0;}
.orange{background:#ecbd00;}
.green{background:#6aec00;}
.blue{background:#00c8ec;}
.purple{background:#c300ec;}
.red{background:#e93a73;}

Answer 2

The problem is the structure of the html, you have put the main div after every to small divs. So its going to print that div first.

What i would suggest doing is change the html structure like this;

float the left column left and the right column right.

Then place around a div around

add media css so that at 800px (or whatever you require) you can display none; on .hide800 this hides the div, then add a div around your current html but put an inline style of display none. Then at 800px (or whatever size you hide the first div) add css to display: block !Important;

This way it will work how you need it for full width browsers, but then when the screen is small enough to change the structure you can use your current code.

html;

<div class="hide800">
    <div class="left-col">
    <div class="main">
    </div>
    <div class="main">
    </div>
    <div class="main">
    </div>
    </div>
    <div class-right-col">
    <div class="small orange">
    </div>
    <div class="small green">
    </div>
    <div class="small blue">
    </div>
    <div class="small purple">
    </div>
    <div class="small red">
    </div>
    </div>
</div>
<div class="show800" style="display:none;">
<div class="main">
</div>
<div class="small orange">
</div>
<div class="small green">
</div>

<div class="main">
</div>
<div class="small blue">
</div>
<div class="small purple">
</div>

<div class="main">
</div>
<div class="small red">
</div>
</div>

css;

.left-col {
float: left;
}
.right-col {
float: right;
}
@media screen and(max-width:800px){
.hide800 {
display: none;
}
.show800 {
display: block !Important;
}
}

If you need me to explain further let me know :)