Bootstrap grid with different number of elements per column depending on screen size

I am using a bootstrap grid to display picture thumbnails, where the number of thumbnails displayed depends on the number of matches to a user's search criteria. I am displaying a different number of thumbnails per row depending on the screen's size, defined as:

 <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">

I then use the following PHP construct to create new row div elements:

<?php

                    for ($i = 0; $i < sizeof($products); $i++):

                        if ($i % 3 == 0) {

                            if ($i > 0)
                                echo "</div>";

                            echo "<div class="row">";

                        }

                        $product = $products[$i];

                        ?>

This works well for -md and -lg but obviously not for -sm and -xs for which I'd need i%2 and i%1. Anybody knows some way I can retrieve from PHP the column size that boostrap is using?