javascript - Bootstrap row height change with individual div -

bootstrap container has rows col-lg-3 class. on 100 articles returned sql query different length of text. each article (numbers 1, 2, 3 etc) put on <div> tag individually. output follows:

but need

html php code

<div class="container" > <div class="row">     <?php         foreach ($value $add) {         echo "<div class='col-md-3'><p>";         echo $add->article_item;   // column name article_item         echo "</p></div>";     }     ?> </div> </div> 

you need change structure of data - work:

<?php   $articlecontainer = array('', '', '', '');   $count = 0;    foreach($value $add)   {     //this called modulus operator if have not seen before     switch ($count % 4)      {       case 0:           $articlecontainer[0] .= '<p>'.$add->article_item.'</p>';           break;       case 1:           $articlecontainer[1] .= '<p>'.$add->article_item.'</p>';           break;       case 2:           $articlecontainer[2] .= '<p>'.$add->article_item.'</p>';           break;       case 3:           $articlecontainer[3] .= '<p>'.$add->article_item.'</p>';           break;       default:           echo 'error';     }       $count++;   } ?>  <div class="container" > <div class="row">   <div class='col-md-3'>     <?=$articlecontainer[0]?>   </div>   <div class='col-md-3'>     <?=$articlecontainer[1]?>   </div>   <div class='col-md-3'>     <?=$articlecontainer[2]?>   </div>   <div class='col-md-3'>     <?=$articlecontainer[3]?>   </div> </div> </div>