Wordpress bootstrap grid loop?

Question

Bootstrap

The code displays correctly as I wanted to line them up, but it seems to me that the code can be improved or can be used as it is in the picture. The final result of what I would like is drawn in more detail.
When using one while, one post is placed in the col-3 class and several col-3 classes are created, which I don’t want, I need to put two posts in one col-3 at once Thank you.

<div class="container">
    <div class="row">
  <?php
  $arguments = [
      'posts_per_page' => 5
  ]; 
  $query = new WP_Query( $arguments ); 
    if( $query->current_post <= 0 ){
       echo '<div class="col-6">';
        the_post_thumbnail('custom-size', array('class' => 'img-fluid') );
        the_title();
       echo "</div>";
    }

    if( $query->have_posts() ){
      
   	echo '<div class="col-3">';
    while( $query->have_posts() ) : $query->the_post();
      if( $query->current_post >= 1 && $query->current_post <= 2 ){
        the_post_thumbnail('custom-size', array('class' => 'img-fluid') );
        the_title();
      }
    endwhile;	
 		echo "</div>";

 		echo '<div class="col-3">';
    while( $query->have_posts() ) : $query->the_post();
      if( $query->current_post >= 3 ){
        the_post_thumbnail('custom-size', array('class' => 'img-fluid') );
        the_title();
      }
    endwhile; wp_reset_postdata(); 	
 		echo "</div>";
       	
    }
  ?>
    </div>
</div>

Answer 1

Let's close this issue now. A few points:
1. No need to run the loop several times, all conditions are checked within one loop.
2. We check the $query->current_post property inside the loop, the counter starts from 0.

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

    <?php
    $args = [
      'post_status'            => 'publish',
      'posts_per_page'         => 5,
      'no_found_rows'          => true,
      'cache_results'          => true,
      'update_post_meta_cache' => false,
      'update_post_term_cache' => false,
    ];
    $query = new WP_Query( $args );

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

      // 1я запись, целиком в .col-6
      if ( $query->current_post === 0 )
      {
        echo '<div class="col-6">'; // Открыли .col-6
          echo '<div class="post-card">';
            the_post_thumbnail( 'custom-size', [ 'class' => 'img-fluid' ] );
            the_title();
          echo '</div>';
        echo '</div>'; // Закрыли .col-6
      }

      // 2я и 4я записи, только открываем .col-3 и выводим 1 запись
      if ( $query->current_post === 1 || $query->current_post === 3 )
      {
        echo '<div class="col-3">'; // Открыли .col-3
          echo '<div class="post-card">';
            the_post_thumbnail( 'custom-size', [ 'class' => 'img-fluid' ] );
            the_title();
          echo '</div>';
      }

      // 3я и 5я записи, выводим запись и закрываем .col-3
      if ( $query->current_post === 2 || $query->current_post === 4 )
      {
          echo '<div class="post-card">';
            the_post_thumbnail( 'custom-size', [ 'class' => 'img-fluid' ] );
            the_title();
          echo '</div>';
        echo '</div>'; // Закрыли .col-3
      }

    endwhile; ?>

  </div>
</div>

This code will output the following HTML:

<div class="row">
  <div class="col-6">
    <div class="post-card">
      ...
    </div>
  </div>

  <div class="col-3">
    <div class="post-card">
      ...
    </div>

    <div class="post-card">
      ...
    </div>
  </div>

  <div class="col-3">
    <div class="post-card">
      ...
    </div>

    <div class="post-card">
      ...
    </div>
  </div>
</div>

But, it is important to understand the order of the posts in the .col-3 columns - it will be like this:

.col-6      .col-3      .col-3
------      ------      ------
post-1      post-2      post-4
            post-3      post-5

not like this:

.col-6      .col-3      .col-3
------      ------      ------
post-1      post-2      post-3
            post-4      post-5

Basically, there is another way:
- Get posts via get_posts() as an array of WP_Post objects.
- Generate HTML without a cycle, form as you need.
- In the right places, substitute the desired WP_Post object by its index in the array.