You can accomplish this by using a counter then updating the class according to your needs. The code below will create a variable $counter
and assign it to 0
if posts exist. By default a 'col-md-4'
is bound to $class
, if the $counter
is less than 3
$class
will be updated to 'col-md-3'
(making it fill 4 columns instead of 3). Then we output the html including the stored class. Finally, the $counter
is incremented ready for the next post item.
<?php
if ( have_posts() ) {
$counter = 0;
?>
<div class="container">
<div class="row">
<?php
while ( have_posts() ) {
the_post();
$class="col-md-4";
if( $counter < 3 ) {
$class="col-md-3";
}
?>
<div class="col-12 <?php echo $class; ?>">
<?php // content etc here ?>
</div> <!-- .col-12 -->
<?php
$counter++;
} // end while
?>
</div><!-- .row -->
</div><!-- .container -->
<?php } else { // end if ?>
<p>There are no posts to display</p>
<?php } ?>