Different layout for every other posts in a category in wordpress

I am working on a wordpress site where I need every other post in a category to have a different layout.

Meaning, the first post will have image on the left, text on the right. The next post will have text on the left, image on the right. The next post (3rd post) will be back to image on the left, text on the right, and so on.

Ignore the coding because it was just a quick one, but here is a jfiddle that visually shows the effect I want. http://jsfiddle.net/U4amd/

I have figured out how to layout “even” posts one way and “odd” posts differently, but used two loops to accomplish it. This won’t work though because then all the even posts are showed followed by all of the odd. Here is the code I currently have:

`

        <?php while(have_posts()) : ?>
        <?php
            $postcount++;
            if( ($postcount % 2) == 0 ) : // skip 'even' posts
                $wp_query->next_post();
            else :
        ?>
        <?php the_post(); ?>

    <div class="product clearfix color-box">

        <div class="vendor pRight fleft">
            <?php $color = get_post_meta($post->ID, 'color', true) ?>
            <div class="color-box-expand pad-inside" style="background-color:<?php echo $color; ?>">
                <?php the_post_thumbnail('bones-thumb-vb'); ?>
            </div>
        </div>
        <div class="vendor-images fleft">
            <?php $slide01 = get_post_meta($post->ID, 'slide01', true) ?>
            <img src="<?php echo $slide01 ?>">  
            <?php the_content() ?>
        </div>

    </div>

    <?php endif; ?>
    <?php endwhile; ?>

    <?php $postcount = 0; rewind_posts(); ?>

        <?php while(have_posts()) : ?>
        <?php
            $postcount++;
            if( ($postcount % 2) != 0 ) : // skip 'odd' posts
                $wp_query->next_post();
            else :
            ?>
        <?php the_post(); ?>

    <div class="product clearfix color-box">

        <div class="vendor-images fleft">
            <?php $slide01 = get_post_meta($post->ID, 'slide01', true) ?>
            <img src="<?php echo $slide01 ?>">  
            <?php the_content() ?>
        </div>

        <div class="vendor pLeft fleft">
            <?php $color = get_post_meta($post->ID, 'color', true) ?>
            <div class="color-box-expand pad-inside" style="background-color:<?php echo $color; ?>">
                <?php the_post_thumbnail('bones-thumb-vb'); ?>
            </div>
        </div>

        <?php endif; ?>
        <?php endwhile; ?>
    </div>
</div>`

Any help at all would be really appreciated. I’m new to php/Wordpress, so still figuring everything out. And if I need to clarify anything just let me know. Thanks!

@Crowjonah — putting this here cause i went over the character limit in a comment —
I probably didn’t do something right, but now when looking at the code in firebug, there are no .even classes assigned. Here is my code based on the above.

<?php $postcount=0;
            while(have_posts()) :        
                $postcount++;
                if( ($postcount % 2) == 0 ) $post_class = ' even';
                else $post_class = ' odd'; ?>
                <div class="product clearfix color-box">                    
                    <div class="vendor pRight <?php echo $post_class; ?>">
                        <?php the_post(); ?>
                        <?php $color = get_post_meta($post->ID, 'color', true) ?>
                        <div class="color-box-expand pad-inside" style="background-color:<?php echo $color; ?>">
                            <?php the_post_thumbnail('bones-thumb-vb'); ?>
                        </div>
                    </div>
                    <div class="vendor-images post <?php echo $post_class; ?>">
                        <?php $slide01 = get_post_meta($post->ID, 'slide01', true) ?>
                        <img src="<?php echo $slide01 ?>">  
                        <?php the_content() ?>
                    </div>
                </div>

        <?php $postcount++;
            endwhile; ?>

Thanks so much for your help man.