Make div div div div in another container on collision

Two columns of boxes, and sometimes columns with a left column, can be larger than a column and must move down the columns of the columns to avoid collisions. The boxes on the right or left may or may not contain, but I don't know # the larger. Anything that can be floated, blocked or embedded, etc.

I have this:

      

        
        
        
      

    

I want this:

      

        
        
        
      

    

How is this possible with CSS?

JSFiddle (first screenshots)

Thank!