In order to have responsive multi column layouts I would use the typical float: left property on all my column classes and size them by percept of screen width. Well, there’s a cleaner and simpler way. Especially if you want your text to automatically flow and maintain even column height! I feel pretty late to the game on this – how did i miss it? Let’s get started on achieving even columns of text with wrapped content in columns. Apply to the parent container:

.wrap-column{ 
    -moz-column-count: 2; 
    -moz-column-gap: 2%; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 2%; 
    column-count: 2; 
    column-gap: 2%; 
}

Column-count will denote the number of columns.The only issue right now is that the two column layout isn’t great for the tiny screen view – all that smushed text. So to make it responsive let’s do the screen change with @media

@media only screen and (max-width: 480px) { 
    .wrap-column{ 
        -moz-column-count: 1; 
        -webkit-column-count: 1; 
        column-count: 1;
    } 
}

Having CSS bug problems? Find out how to work around CSS Transition Effects creating a 1 pixel jump here.