Clear Rows When Doing Multi-responsive Columns - Bootstrap

Question

That title might not be very accurate but here is the situation:

Answer 1

In case your number of col- boxes in a row is DYNAMIC and different for resolution like it is in my case than based on your col- classes do the modulus operator. Take example of below example.

    
    programs as $program ): ?>
        
 DATA 
        
        
            

        
            

        
    

col-xs-6 means it has 2 boxes in a row for extra-small devices. so for it I've added that $elementCounter % 2 == 0 condition so it is true for every second element ( AFTER ). and added clearfix with visible-xs so it shouldn't effect on desktop or other resolutions.

col-sm-3 means 4 boxes in row for small and above devices so in that case i've added $elementCounter % 4 == 0 and with that hidden-xs so that clearfix is hidden for xs devices and will be visible for small and above. This way you can modify it accordingly.