how to auto add class after 3 posts outside post loop? - loops

Question

On my WordPress website in front page there is a latest post list and the structure described below. The first div contains class music-info contains 3 post with the same structure but the class added after that to <div class="music-info two"> how to make this possible in wordpress post outside the post loop
<div class="music-info">
<div class="col-md-4 music-grids">
<figure class="effect-bubba">
<img src="images/m1.jpg" alt=""/>
<figcaption>
<h4>MUSIC ALBUM</h4>
<p>In sit amet sapien eros Integer in tincidunt labore et dolore magna aliqua</p>
</figcaption>
</figure>
</div>
<div class="col-md-4 music-grids">
<figure class="effect-bubba">
<img src="images/m2.jpg" alt=""/>
<figcaption>
<h4>MUSIC ALBUM</h4>
<p>In sit amet sapien eros Integer in tincidunt labore et dolore magna aliqua</p>
</figcaption>
</figure>
</div>
<div class="col-md-4 music-grids">
<figure class="effect-bubba">
<img src="images/m3.jpg" alt=""/>
<figcaption>
<h4>MUSIC ALBUM</h4>
<p>In sit amet sapien eros Integer in tincidunt labore et dolore magna aliqua</p>
</figcaption>
</figure>
</div>
<div class="clearfix"></div>
</div>
<div class="music-info two">
<div class="col-md-4 music-grids">
<figure class="effect-bubba">
<img src="images/m4.jpg" alt=""/>
<figcaption>
<h4>MUSIC ALBUM</h4>
<p>In sit amet sapien eros Integer in tincidunt labore et dolore magna aliqua</p>
</figcaption>
</figure>
</div>
<div class="col-md-4 music-grids">
<figure class="effect-bubba">
<img src="images/m6.jpg" alt=""/>
<figcaption>
<h4>MUSIC ALBUM</h4>
<p>In sit amet sapien eros Integer in tincidunt labore et dolore magna aliqua</p>
</figcaption>
</figure>
</div>
<div class="col-md-4 music-grids">
<figure class="effect-bubba">
<img src="images/m5.jpg" alt=""/>
<figcaption>
<h4>MUSIC ALBUM</h4>
<p>In sit amet sapien eros Integer in tincidunt labore et dolore magna aliqua</p>
</figcaption>
</figure>
</div>
<div class="clearfix"></div>
</div>
PHP code
<?php
$args = array(
'post_type'=>'product',
'posts_per_page'=>'3'
);
$query = new WP_Query($args);
/*echo"<pre>";
print_r($query);
die();*/
?>
<div class='music-info'>
<?php
if($query->have_posts()): while($query->have_posts()): $query->the_post();
?>
<div class="col-md-4 music-grids">
<figure class="effect-bubba">
<?php
if(has_post_thumbnail())
{
the_post_thumbnail();
}
?>
<figcaption>
<h4><?php the_title(); ?></h4>
<?php the_excerpt(); ?>
</figcaption>
</figure>
</div>
<?php wp_reset_postdata(); ?>
<?php endwhile; endif; ?>
<div class="clearfix"></div>
</div>
</div>
</div>