How to add automatically bootstrap 4 order-lg-1 and order-lg-2 classes for columns in foreach loop based on the count?

PHP and Html Code

<?php
    //get your custom posts ids as an array
    $howtoplaycontent_args = get_posts(array(
            'post_type'   => 'howtoplaycontent',
            'post_status' => 'publish',
            'posts_per_page' => -1,
            'fields' => 'ids'
        )
    );
    //loop over each post
    foreach($howtoplaycontent_args as $p){
        //get the meta you need form each post
        $howtoplaycontent = get_post_meta($p, 'howtoplaycontent', true );
    }

?>

 <?php
 $count = 0;
 foreach ($howtoplaycontent as $hpc)
 {
 $count ++;

 if($count == 1) {?>
 
 <div class="row courses_row" style="background-color: #f8f8f8">
 
   <div class="container">
        <div class="row" style="padding: 15px;">
          <div class="col-lg-6 course_col order-lg-1">
          </div>
          
          <div class="col-lg-6 course_col order-lg-2">
          </div>
          
          
        </div>
 
 </div>
 
 
 <?php } ?>
 
 <?php if($count == 2) {?>
 
 <div class="row courses_row" style="background-color: #f8f8f8">
 
   <div class="container">
        <div class="row" style="padding: 15px;">
          <div class="col-lg-6 course_col order-lg-2">
          </div>
          
          <div class="col-lg-6 course_col order-lg-1">
          </div>
          
          
        </div>
 
 </div>
 
 
 <?php } ?>

Example Design

How to add automatically bootstrap 4 order-lg-1 and order-lg-2 classes for columns in foreach loop based on the count?

PHP and Html Code

<?php
    //get your custom posts ids as an array
    $howtoplaycontent_args = get_posts(array(
            'post_type'   => 'howtoplaycontent',
            'post_status' => 'publish',
            'posts_per_page' => -1,
            'fields' => 'ids'
        )
    );
    //loop over each post
    foreach($howtoplaycontent_args as $p){
        //get the meta you need form each post
        $howtoplaycontent = get_post_meta($p, 'howtoplaycontent', true );
    }

?>

 <?php
 $count = 0;
 foreach ($howtoplaycontent as $hpc)
 {
 $count ++;

 if($count == 1) {?>
 
 <div class="row courses_row" style="background-color: #f8f8f8">
 
   <div class="container">
        <div class="row" style="padding: 15px;">
          <div class="col-lg-6 course_col order-lg-1">
          </div>
          
          <div class="col-lg-6 course_col order-lg-2">
          </div>
          
          
        </div>
 
 </div>
 
 
 <?php } ?>
 
 <?php if($count == 2) {?>
 
 <div class="row courses_row" style="background-color: #f8f8f8">
 
   <div class="container">
        <div class="row" style="padding: 15px;">
          <div class="col-lg-6 course_col order-lg-2">
          </div>
          
          <div class="col-lg-6 course_col order-lg-1">
          </div>
          
          
        </div>
 
 </div>
 
 
 <?php } ?>

Example Design

• posts
• customization
• loop
• twitter-bootstrap

Share Improve this question edited Jul 2, 2020 at 19:58 Farhan Dharsi asked Jul 2, 2020 at 19:52 Farhan DharsiFarhan Dharsi 10133 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You should use the PHP modulo operator for that. Since you need two different layouts, you should calculate your classes numbers according to $count % 2 and ($count + 1) % 2:

<?php
$count = 0;
foreach ($howtoplaycontent as $hpc): ?>
<div class="row courses_row" style="background-color: #f8f8f8">
    <div class="container">
        <div class="row" style="padding: 15px;">
            <div class="col-lg-6 course_col order-lg-<?php echo $count % 2 + 1; ?>">
            </div>
          
            <div class="col-lg-6 course_col order-lg-<?php echo ($count + 1) % 2 + 1; ?>">
            </div>
        </div>
    </div>
</div>
<?php $count ++;
endforeach; ?>

Update

Since you need a different background color on even and odd rows, I suggest you to define two additional classes in your CSS:

.row.courses_row.odd_row {
    background-color: #f8f8f8;
}
.row.courses_row.even_row {
    background-color: #ffffff;
}

and then use the following code:

<?php
$count = 0;
foreach ($howtoplaycontent as $hpc): ?>
<div class="row courses_row <?php echo $count % 2 ? 'even' : 'odd'; ?>_row">
    <div class="container">
        <div class="row" style="padding: 15px;">
            <div class="col-lg-6 course_col order-lg-<?php echo $count % 2 + 1; ?>">
            </div>
          
            <div class="col-lg-6 course_col order-lg-<?php echo ($count + 1) % 2 + 1; ?>">
            </div>
        </div>
    </div>
</div>
<?php $count ++;
endforeach; ?>