The panels below are contained and positioned in the Bootstrap grid system creating a 3 column layout. Instead of creating new row containers, all of the col-* elements are in one row parent and allowed to naturally flow to the next line based on the applied float style. However, the variable height panels cause issues with the floating element consistently flowing to the beginning of each row. The solution was to add a little Javascript to find the max height on each row and set each col-* element's height so the rows appeared top aligned and flow properly. Resize the window to see the heights recalculated and eventually removed once the media breakpoint is reached which causes all the elements to be on their own line.