bootstrap - wordpress grid - wordpress

Question

I am making a wp custom theme with bootstrap. I implemented a grid to display the latest posts. I want to display 4 items in a row for larger screens (down to 768px = col-sm-3) and then 2 items per row (col-xs-6). It kinda works but at some point the items are not displaying properly. In particular, when the screen width is between 1200 - 768 or less than 579, 1 row every 4 is broken and only displays 1 item (see images). I'm not sure where the issue is.
I read about the .cleardiv class but I don't understand where I should put it.
You can see the website here. (Please note that the top row with the 4 items is working fine as it is generated before the other 12 in a different row). Just click the "v" arrow to display the rows with the issue.
Thanks
<section class="bg-white" id="in_evidenza">
<div class="container">
<!-- this is the first row which is always visible. no issue here -->
<div class="row"> ...
</div>
<!-- second row: issue here -->
<div class="row" id="news-content">
<?php
$args = array( 'numberposts' => '12', 'category_name' => 'news', 'orderby' => 'date', 'offset' => '4' );
$recent_posts = wp_get_recent_posts( $args );
$i = 1;
foreach( $recent_posts as $recent ):
$post_img_src = "http://www.assatena.it/testbs/wordpress/wp-content/uploads/2016/03/".$i.".png";
$post_title = $recent["post_title"];
$post_id = $recent["ID"];
$post_content = get_post_field('post_content', $post_id);
$post_date = get_the_date("d/m/Y", $post_id);
if(strlen($post_title) >= 19){
$post_title_short = substr($post_title, 0, 19);
$post_title_short.="...";
}else
$post_title_short = $post_title;
$teaser = substr(strip_tags($post_content), 0, 66);
$teaser.=" . . .";
?>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6" id="col-news-all">
<div class="text-center">
<img class="img-rect" width="160" height="100" alt="" src='<?php echo $post_img_src; ?>' />
<h3><?php echo $post_title_short; ?></h3>
<p>
<?php echo $teaser; ?>
<br> <!-- open -->
<a data-toggle="modal" href="" data-target="#modal-news-<?php echo $post_id; ?>">
<span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
</a>
</p>
</div>
</div>
<div id="modal-news-<?php echo $post_id; ?>" class="modal fade in" aria-hidden="false" role="dialog" tabindex="-1">
<div class="modal-content">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="modal-body">
<h2><?php echo $post_title; ?></h2>
<p class="post_date">- <?php echo $post_date; ?> -</p>
<hr class="star-primary">
<img id="news_img" class="img-responsive img-modal" alt="News img" src="<?php echo $post_img_src; ?>" />
<div class=" text-left">
<div class="my_post_content">
<p><?php echo $post_content; ?></p>
</div>
</div>
<div class="text-center"> <!-- close -->
<a data-dismiss="modal" class="btn btn-success btn-xl ">Chiudi</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
$i%=4;
$i++;
endforeach;
?>
</div> <!-- row -->
<div class="text-center">
<a data-toggle="modal" href="" data-target="">
<span id="news-all" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</a>
</div>
</div> <!-- container -->
</section>
images:

Answer 1

Before your $i++ write an if statement to place a clearfix
<?php if ($i % 4 == 0); ?>
<div class="clearfix"></div>
<?php endif; ?>
EDIT: for the mobile you can set another clearfix with $i % 2 == 0 and hide it in desktops via visible-xs