Display posts in a grid by using a for-loop

Display posts in a grid by using a for-loop

I have a PHP script that takes each post of a WordPress and assigns the
post contents to a specific div (.col-1-6). These divs are then arranged
in a grid. I have ten different posts (content divs) and I would like for
them to show up on two rows. The first row should have six posts and the
second row should have four. Right now, each row has five posts. Is there
a way I can edit my PHP script to include the functionality I need?
<?php
$num_cols = 2; // set the number of columns here
//the query section is only neccessary if the code is used in a
page template//
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; //
for pagination
$args = array(
'posts_per_page' => 12, // optional to overwrite the dashboard
setting
'post_type' => 'graduate', // add any other query parameter to
this array
'paged' => $paged
);
query_posts($args);
//end of query section
if (have_posts()) :
for ( $i=1 ; $i <= $num_cols; $i++ ) :
echo '<div id="col-'.$i.'" class="preview">';
$counter = $num_cols + 1 - $i;
while (have_posts()) : the_post();
if( $counter%$num_cols == 0 ) : ?>
<div class="col-1-6">
<?php
if ( has_post_thumbnail() ) { // check if the post
has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
<a href="<?php echo get_permalink(); ?>" title="<?php
the_title(); ?>"><p><?php the_title(); ?></p></a>
</div>
<?php endif;
$counter++;
endwhile;
rewind_posts();
echo '</div>'; //closes the column div
endfor;
else:
echo 'no posts';
endif;
wp_reset_query();
?>