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;}