Continue or break the while loop

Question

Im trying to figure out how to keep while loop going for posts on another section in bootstrap columns or is there way to "break it" and then keep it going where it remained? First picture shows the while loop showing 5 posts the way i want. Picture below shows how i want the next 6 posts keep going vertically. Now im getting the posts to show but it starts from the first post and just duplicates them.

  <div class="container">
  <div class="row">
  <?php

  $args = array(
  'post_type' => 'post',
  'posts_per_page' => 5,
   );

   $blogposts = new WP_Query($args);

  $i = 0;
   while($blogposts->have_posts()) {
   $blogposts->the_post();

   if ($i < 2) :
   ?>
   <div class="col-md-6">
   <?php else : ?>
   <div class="col-md-4">
   <?php endif; ?>
  <a href="<?php the_permalink(); ?>">
    <div class="card border-0">
      <div class="card-picture">

        <img class="card-img" src="<?php echo 
      get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">

        <div class="card-img-overlay d-flex flex-column">
          <h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
          <div class="mt-auto"><?php the_author(); ?> - <i class="fas fa- 
      clock"></i> - <?php the_time('d/m/Y')?></div>
        </div>
      </div>
    </div>
     </a>
   </div>

    <?php
     wp_reset_query();
   $i++;
    }

   ?>



    <div class="container">
      <div class="row">

        <div class="col-md-8">
        <?php
$args = array(
    'post-type' => 'post',
    'posts_per_page' => 6,
);

$blogposts = new WP_Query($args);

while($blogposts->have_posts()) {
    $blogposts->the_post();


     ?>
          <div class="card-3">
            <div class="row no-gutters">
              <div class="col-md-5">
                <a href="<?php the_permalink(); ?>">
                <img class="card-3-img" src="<?php echo 
    get_the_post_thumbnail_url(get_the_ID()); ?>" 
    class="card-img-top h-100" 
    alt="...">
              </div>
              <div class="col-md-7">
                <div class="card-body">
                  <h5 class="card-title-3"><?php the_title(); ?></h5>
                </a>
                  <p class="card-text"><?php the_excerpt(); ?></p>
                  <div class="mt-auto"><?php the_author(); ?> - <i class="fas 
 fa-clock"></i> - <?php the_time('d/m/Y')?></div>
                </div>
              </div>
            </div>
          </div>

          <?php }
wp_reset_query(); ?>

Answer 1

'break' is the right keyword... code structure below, no custom query needed if used in a standard template.

        <?php

    $posts_per_first_section = 6; //how many posts you want to show in the first section//

    if ( have_posts() ) :
        ?>

        <!-- opening html for first loop -->

        <?php
        /* Start the Loop */
        while ( have_posts() ) :
            the_post();

            //your output per post in the first section//
            //for example//
            get_template_part( 'template-parts/post/content', get_post_format() );

        //check for 'break' out of first loop//
        if( $wp_query->current_post+1 == $posts_per_first_section ) break; 

        endwhile; ?>

        <!-- closing html for first loop -->

        <?php //checking if there are more posts to show in second loop
        if( $wp_query->current_post > 0 && $wp_query->current_post+1 < $wp_query->found_posts ) : ?>

        <!-- opening html for second loop -->

        <?php while ( have_posts() ) :
            the_post();

            //your output per post in the second section//
            //for example//
            get_template_part( 'template-parts/post/content', get_post_format() );

        endwhile; ?>

        <!-- closing html for second loop --> 

        <?php endif; //end checking if there are more posts to show in second loop

    else :

        echo 'no posts found';

    endif;
    ?>