How to Show Posts in Even Odd Format 2 Wordpress

 <?php

global $post;

$args = array( 'numberposts' => 10, 'category_name' => 'before-after' );

$posts = get_posts( $args );

$i=1;

foreach( $posts as $post ): setup_postdata($post);

if($i%2){

//$i%2 ? 'odd':'even')

?><div class="row ba-bg">

   <div class="col-md-4">

   <div class="slide__text">

   <div class="table-center">

   <div class="table-cell">

   <h3 class="gap-20"><?php the_title();?></h3>

   <div class="gap-20"><?php the_excerpt(); ?></div>

  

   </div>

   </div>

   </div>

   <p class="gap-20">

   </p>

   </div>

   <div class="col-md-8 gap-20">

<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'thumbnail') ); ?>

   <img src="<?php echo $url ?>" alt="img" class="img-responsive wid-100"/>

   </div>

   </div>

   

<?php

} else {

   ?>

   <div class="row ba-bg-2">

   <div class="col-md-8 gap-20">

   <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'thumbnail') ); ?>

   <img src="<?php echo $url ?>" alt="img" class="img-responsive wid-100"/>

   </div>

   <div class="col-md-4">

   <div class="slide__text">

   <div class="table-center">

   <div class="table-cell">

   <h3 class="gap-20"><?php the_title();?></h3>

   <div class="gap-20"><?php the_excerpt(); ?></div>

  

   </div>

   </div>

   </div>

   <p class="gap-20">

   </p>

   </div>

   </div>

<?php    

}

$i++;

endforeach;

?>