重复bootstrap列，php在行元素中按4或2分组

I have the following col-md-3 col-sm-6 which I'm repeating for every input in my DB table, but I need them to be surrounded by row elements for every four col-md-3or every two col-sm-6.

<?php 
  .
  .
  .

        while($query_row = mysqli_fetch_assoc($query_run)){

                $ref_name = $query_row ['ref_name'];
                $ref_company = $query_row ['ref_company'];
                $ref_img = $query_row ['ref_img'];
                $ref_modal = $query_row ['ref_modal'];

  ?>    


         <div class="col-md-3 col-sm-6 outerref">
          <a href="#" data-toggle="modal" data-target="<?php echo "$ref_modal"?>"> 
            <div class="innerref">
             <img src="<?php echo $ref_img?>" alt="" class="maxim img-responsive" >
              <h2><?php echo "$ref_name"?></h2>
              <h4><?php echo "$ref_company"?></h4>
            </div> 
          </a> 
        </div>


     <?php
                }

  .
  .
  . 

  ?>

I have no idea how to end the row and open a new one when four col-md-3s or two col-sm-6s are outputted. Any help i appreciated.

Thanks in advance.

Try the belove code this will add row for every four col-md-3.

$count = 1;
while($query_row = mysqli_fetch_assoc($query_run)){

        $ref_name = $query_row ['ref_name'];
        $ref_company = $query_row ['ref_company'];
        $ref_img = $query_row ['ref_img'];
        $ref_modal = $query_row ['ref_modal'];

         ?> 

  <div class="row">
  <div class="col-md-3 col-sm-6 outerref">
    <a href="#" data-toggle="modal" data-target="<?php echo "$ref_modal"?>">  
      <div class="innerref">
       <img src="<?php echo $ref_img?>" alt="" class="maxim img-responsive" >
      <h2><?php echo "$ref_name"?></h2>
      <h4><?php echo "$ref_company"?></h4>
     </div> 
    </a> 
  </div>
 <?php if($count % 4 == 0){
           echo '</div><div class="row">';
      } ?>

  <?php
       $count++; }


 ?>

Hope this will help, you can ask if have any questions.

Use the modulo (or modulus) operator: In case of four col-md-3s, the usage will be:

<?php 
.
.
.
$i=1;
echo '<div class="row">';?>
    while($query_row = mysqli_fetch_assoc($query_run)){

            $ref_name = $query_row ['ref_name'];
            $ref_company = $query_row ['ref_company'];
            $ref_img = $query_row ['ref_img'];
            $ref_modal = $query_row ['ref_modal'];

             ?> 


      <div class="col-md-3 col-sm-6 outerref">
        <a href="#" data-toggle="modal" data-target="<?php echo "$ref_modal"?>">  
          <div class="innerref">
           <img src="<?php echo $ref_img?>" alt="" class="maxim img-responsive" >
          <h2><?php echo "$ref_name"?></h2>
          <h4><?php echo "$ref_company"?></h4>
         </div> 
        </a> 
      </div>


<?php if ($i%4==0){echo '</div> <div class="row">';}?>
  <?php    
              $i++;
            }


<?php echo '</div> ';
    .
    .
    .  

  ?>

You can use two different counters, and two different div for col-md-3 and col-sm-6 and cleverly use the modulus operator;