PHP / HTML displaying only x amount of results depending on viewport - php

Question

I'm using Bootstrap v3 and responsive design works perfectly everywhere besides in this example.
My issue is that when the page is scaled, it always shows 5 divs (as I would expect it to do with the code below), regardless on how many rows it takes up.
$array = array(1,2,3,4,5);
foreach($array as $row)
{
echo "<div style='display: inline-block;'>";
// HTML DIV Content here
echo "</div>";
}
What I want to do, that I can't figure out how is for it to count how many divs will fit in 1 or 2 rows. If 5 can fit in 1 row, then show 5 as 1 row. If 4 can fit in 1 row then show 8 as 2 rows. If 3 can fit in 1 row then show 6 as 2 rows.
So my array would probably contain the max that can be displayed (8 in this example).
I'm not sure if bootstrap can do this out of the box, or if PHP has this functionality. Or if I'm going to have to use jQuery to accomplish this.
Current Behavior:
Expected Behavior:

Answer 1

<table class='table table-responsive
'>
<tr>
<?php
$array = array(1,2,3,4,5);
foreach($array as $row)
{
echo "<td>";
// content here
echo "</td>";
}
?>
</tr>
</table>
Use table responsive instead of div classes and it will render on one line.
Apologies for poor format or errors on my I phone it's never the best experience.
Or if you want to control by size of div it gets harder. You can get same number in each row by echoing bootstrap div classes I.e col-md-3 for example. If you want it to know the widths and your body width is known floats might work.