Style sheet output from SQL to corresponding bootstrap columns

Question

I use SQL and PHP to create a table filled with data in a simple html table. Everything works fine, but I'm trying to include each element in my own div in the bootstrap layout of 3 columns. The problem here is the need to add rows / columns in a non-repeating order. Please see Jsfiddle to see the grid layout I'm trying to achieve.

Using foreach, I get the data so that it displays well in a simple table. My question is what would be the best way to make the output format like jsfiddle? Any advice would be greatly appreciated! I guess I need JS for this? Thank you for your time.

NOTE Make the Javascript tab thin to see the actual effect, otherwise it will turn around. The layout I'm looking for

<!-- CODE FOR TABLE LAYOUT -->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <h2>
                Database Item 1
            </h2>
            <p>
                Detials about this item
            </p>
            <p>
                <a class="btn" href="#">View details »</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2>
                Database Item 2
            </h2>
            <p>
                Detials about this item
            </p>
            <p>
                <a class="btn" href="#">View details »</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2>
                Database Item 3
            </h2>
            <p>
                Detials about this item
            </p>
            <p>
                <a class="btn" href="#">View details »</a>
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <h2>
                Database Item 4
            </h2>
            <p>
                Detials about this item
            </p>
            <p>
                <a class="btn" href="#">View details »</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2>
                Database Item 5
            </h2>
            <p>
                Detials about this item
            </p>
            <p>
                <a class="btn" href="#">View details »</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2>
                Database Item 6 
            </h2>
            <p>
                Detials about this item
            </p>
            <p>
                <a class="btn" href="#">View details »</a>
            </p>
        </div>
    </div>
</div>

Answer 1

You don't need javascript, you just need to iterate and close the div line according to the number of iterations

echo '<div class="container-fluid">';
for($i=1; $i < count($array) + 1; $i++) {
     if(is_int(($i - 1) / 3) || ($i - 1) == 0) {
         echo '<div class="row">';
     }
     echo '<div class="col-md-4">';
     echo '<h2>'. $array[$i]['item_name'].'</h2>';
     echo '<p>'.$array[$i]['item_descrption'].'</p>';
     echo '<p><a class="btn" href="#">View details »</a></p>';
     echo '</div>';
     if(is_int($i/3) {
        echo '</div>';
     }
 }
 echo '</div>';