Bootstrap clearfix every 3 columns

Answer 1

I acually had a similar problem and wrote some jQuery for it, works perfectly for me!

With the following html:

    @foreach($products as $p)
        

            
                
            
            
{{ $p->name }}
            
{{ $p->details }}
        
    @endforeach

And jQuery:

$(document).ready(function() {
    $(window).resize(function() {
        var width = window.outerWidth;
        var items = $('div#products > div');

        if(width <= 767) {
            console.log('extra small loop (mobile)');
            $('div#products .row').contents().unwrap();
        } else if (width >= 768 && width <= 991 ){
            console.log('small loop (tablet)');
            $('div#products .row').contents().unwrap();
            for (var i = 0; i < items.length; i += 2) {
                var div = $("
", {
                    class: 'row'
                });
                items.slice(i, i + 2).wrapAll(div);
            }
        } else { // greater than 991 
            console.log('medium loop (desktop)');
            $('div#products .row').contents().unwrap();
            for (var i = 0; i < items.length; i += 3) {
                var div = $("
", {
                    class: 'row'
                });
                items.slice(i, i + 3).wrapAll(div);
            }
        }
    }).resize();
});

It grabs 3 columns on desktop size and puts them in a row, when changed to tablet size it wil break up those rows and grab 2 columns and put those in a row. And finally for mobile it will break the rows again and show all items stacked.

Hope this helps!