Blog post layouts wordpress

I’m trying to create a different layout on my blog posts page depending on when the post is created. so blog post 1 will have one class while post two will have another and post 3 will have a final class. hard to explain but here is my code hopefully it will make more sense:

        <?php 

            if(have_posts()):

                while(have_posts()): the_post();

                $counter = 1;

                ?>

                <?php if($counter == 1){ ?>

                    <div class="new-row">

                    <div class="boxes picture-box contact-smaller-box">

                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>

                    </div><!--/.picture box-->




                    <div class="boxes white-box contact-smaller-box">

                    <div class="box-inner right-side">

                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

                    <p><?php echo substr(get_the_excerpt(), 0,70); ?></p>
                    <a href="<?php the_permalink(); ?>" title="find out more" class="find-out pink-link">Read More</a>

                    </div><!--/.box inner-->

                    <div class="arrow arrow-left"><img src="..."></div>


                    </div><!--/.white box-->

                    </div><!--/.new row-->

                    <?php $counter = $counter++; ?>


                <?php } if($counter == 2){?>


                    <!-- second section of the blog post content -->



                    <div class="new-row">

                    <div class="boxes pink-box contact-smaller-box">

                    <div class="box-inner">

                    <h2><?php the_title(); ?></h2>

                    <p><?php echo substr(get_the_excerpt(), 0,70); ?></p>

                    <a href="<?php the_permalink(); ?>" title="find out more" class="find-out purple-link">Read More</a>

                    </div><!--/.box inner-->

                    <div class="arrow arrow-right"><img src="..."></div>


                    </div><!--/.pink box-->





                    <div class="boxes picture-box contact-smaller-box">

                    <img src="..." alt="hearing aids for adults">

                    </div><!--/.picture box-->

                    </div><!--/.new row-->


                <?php } ?>


            <?php

                endwhile;

            endif;

        ?>

At the moment both of my test posts are showing as the first type of post, so im thinking my counter is not working correctly, or i have my divs in the wrong position to make this work. im new at working with php so i dont know where i am going wrong. any advice would be brilliant.