I am trying to create a responsive grid design using a masonry style design. I have a code that automatically reorganizes the boxes when resizing the screen but for some reason when it is three columns wider the bottom two rows have only two boxes instead of the second to bottom row having three boxes and the bottom row having one box. How can I fix this page to make it appear that all rows are completely full before putting boxes on the next row?

Here is an example:

http://www.bootply.com/118335