It’s a purely CSS-issue.
Your current css on the recipy-boxes are:
width: 33.33%;
float: left !important;
margin-bottom: 30px;
With this CSS, if the boxes are not of equal height they will not appear on a clean row unless you put in like a clear:both after every three boxes before each new row (which does not work well when you want to change row-count for smaller devices). So instead try changing the css to this:
float:none !important;
margin-bottom:30px;
width:33%;
display:inline-block;
vertical-align:top;
