while loop and bootstrap - php

Question

I have problem to display posts properly.
Im displaying content dinamicaly with a function.
Function in php is
function displayAllPosts () {
global $connection;
$query = "SELECT * FROM blog_post ";
$run_query = mysqli_query($connection,$query);
while ($row = mysqli_fetch_array ($run_query)){
$post_title = $row ['post_title'];
$post_desc = $row ['post_desc'];
$post_img = $row ['post_img'];
echo "
<div class='col-md-3 col-sm-6'>
<div class='feature-center text-center animate-box' data-animate-effect='fadeIn'>
<img class='image-responsive' width='100%' src='$post_img' / ><hr>
<h2>{$post_title}</h2><hr>
<p>{$post_desc} </p>
<a href='#'><button type='button' class='btn btn-info' style='width:100%'>Categoty Title</button></a>
</div>
</div>
";
}
}
and like that page looks like this:
page
on smaler devices it will display 2 columns in a row. I was wandering is it posible to insert
<div class='clearfix'></div>
after 2 displayed columns?

Answer 1

i found solution :
$count=0;
while ($row = mysqli_fetch_array ($run_query)){
$post_title = $row ['post_title'];
$post_desc = $row ['post_desc'];
$post_img = $row ['post_img'];
echo "
<div class='col-md-3 col-sm-6'>
<div class='feature-center text-center animate-box' data-animate-effect='fadeIn'>
<img class='image-responsive' width='100%' src='$post_img' / ><hr>
<h2>{$post_title}</h2><hr>
<p>{$post_desc} </p>
<a href='#'><button type='button' class='btn btn-info' style='width:100%'>Categoty Title</button></a>
</div>
</div>
";
$count++;
switch ($count){
case ($count % 4 == 0) ;
echo "<div class='clearfix visible-lg-block visible-md-block'></div>";
break ;
case ($count % 2 == 0 && $count % 4 !==0 ) ;
echo "<div class='clearfix visible-sm-block'></div>";
break ;
}
}