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