Wordpress循环 - 首先发布不同的包装

I want to show 5 posts, first one is bigger and has a other class around itself.

I've found a few other posts which are basically the same, but none of them shows how to 'wrap' the first post and 'wrap' all the other posts together.

I've made an example with html/css how it should look.

Hope someone can help me with this. :)

<?php 
$args = array(
    'post_type' => 'services',
    'posts_per_page' => 5
);
$loop = new WP_Query($args);

while ($loop->have_posts()) : 
    $loop->the_post();

    if ($loop->current_post == 0) {
        echo '<div class="col-md-6">';
        the_post_thumbnail();
        the_title();
        echo '</div>';              
    }

    else {
        echo '<div class="col-md-6">';
        the_post_thumbnail();
        the_title();
        echo '</div>';
    }
endwhile; wp_reset_postdata(); ?>

.col-md-6 {
  width: 50%;
  padding: 0 !important;
  float: left;
}

img {
  width: 100%;
  height: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<section>
     <div class="col-md-6">
      <img src="http://placehold.it/100x100" alt="">
     </div>
  
    <div class="col-md-6">
      <div class="col-md-6"><img src="http://placehold.it/100x100" alt=""></div>
      <div class="col-md-6"><img src="http://placehold.it/100x100" alt=""></div>
      <div class="col-md-6"><img src="http://placehold.it/100x100" alt=""></div>
      <div class="col-md-6"><img src="http://placehold.it/100x100" alt=""></div>
    </div>
</section>

</div>

I've fixed this the way I want.

Here's the code I've uesd if someone's looking for something like this.

<section class="no-gutter">
<?php 
$args = array(
    'post_type' => 'services',
    'posts_per_page' => 5
);
$loop = new WP_Query($args);

    while ($loop->have_posts()) : 
        $loop->the_post(); ?>

       <?php if ($loop->current_post == 0) : ?>

            <!-- large -->
            <div class="col-md-6 large">
                <a href="<?php the_permalink(); ?>" title="<?php the_title();?>">
                    <div class="wrapper">
                        <?php the_post_thumbnail(); ?>
                        <span><?php the_title(); ?></span>
                    </div>
                </a>
            </div><!-- end large -->  

        <!-- small -->
        <div class="col-md-6">
            <?php else : ?>
                <div class="col-md-6">
                    <a href="<?php the_permalink(); ?>" title="<?php the_title();?>">
                        <div class="wrapper">
                            <?php the_post_thumbnail(); ?>
                            <span><?php the_title(); ?></span>
                        </div>
                    </a>
                </div>
            <?php endif; ?>

    <?php endwhile; wp_reset_postdata(); ?>
        </div><!-- end small -->

<?php 
$args = array(
    'post_type' => 'services',
    'posts_per_page' => 5
);
$loop = new WP_Query($args);

while ($loop->have_posts()) : 
    $loop->the_post();

    echo '<div class="some-div">';
    if ($loop->current_post == 0) {
        echo '<div class="col-md-6">';
        the_post_thumbnail();
        the_title();
        echo '</div>';  
         echo '</div>'; // close .some-div
         echo '<div class="other-div">';
    }

    else {
        echo '<div class="col-md-6">';
        the_post_thumbnail();
        the_title();
        echo '</div>';
    }
    echo '</div>'; // close .other-div
endwhile; wp_reset_postdata(); ?>