WordPress | Loop different col-md

I know the wordpress loop is done like this:

  <?php
    /*MOSTRA NEWS CPT ALLENAMENTO*/
    $query_mostra_cpt_allenamento = array(
        'post_type' => 'news-allenamento',
        'posts_per_page'    => 4,
        'orderby' => 'meta_value',
        'order' => 'ASC',
    );
    $res_cpt_allenamento = new WP_Query( $query_mostra_cpt_allenamento );
    if( $res_cpt_allenamento->have_posts() ) : ?>
        <div style="padding-top: 30px;" class="row">

            <?php  while( $res_cpt_allenamento->have_posts() ) : $res_cpt_allenamento->the_post(); ?>
                <!-- Grid row -->
                <div style="padding-bottom: 10px;padding-top: 10px;" class="col-md-6">
                    ...
                </div>
                <!-- Grid column -->
            <?php endwhile; ?>
        </div>

    <?php endif;
    wp_reset_postdata();
    ?>

and I will have 4 posts with col-md-6

now I need something more, or rather I would like to create an automatic structure which, however, is composed in this way, how can I do?

<div class="container">
    <div class="row">
        <div style="padding-right: 0px;padding-left: 0px;border: 1px solid #fff" class="col-md-6">
            <div class="view">
                ...
            </div>
        </div>
                <div style="padding-right: 0px;padding-left: 0px;border: 1px solid #fff" class="col-md-6">
                    <div class="container-fluid">
                        <div class="row">
                            <div style="padding-right: 0px;padding-left: 0px;border: 1px solid #fff" class="col-md-6">
                                <div class="view">
                                    ...
                                </div>
                            </div>

                            <div style="padding-right: 0px;padding-left: 0px;border: 1px solid #fff" class="col-md-6">
                                <div class="view">
                                    ...
                                </div>
                            </div>

                            <div style="padding-right: 0px;padding-left: 0px;border: 1px solid #fff" class="col-md-6">
                                <div class="view">
                                    ...
                                </div>
                            </div>

                            <div style="padding-right: 0px;padding-left: 0px;border: 1px solid #fff" class="col-md-6">
                                <div class="view">
                                    ...
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    </div>
</div>

that would give me this result: news magazine

how can i make this structure with the wordpress loop?

Answer

An option is to split the query like this:

<?php
    /*MOSTRA NEWS CPT ALLENAMENTO*/
    $query_mostra_cpt_allenamento = array(
        'post_type' => 'news-allenamento',
        'posts_per_page' => 1, // return only the first post
        'orderby' => 'meta_value',
        'order' => 'ASC',
        'no_found_rows' => true,
    );
    /*MOSTRA NEWS CPT ALLENAMENTO*/
    $query_mostra_cpt_allenamento_after = array(
        'post_type' => 'news-allenamento',
        'posts_per_page' => 3,
        'offset' => 1,// start from the second post
        'orderby' => 'meta_value',
        'order' => 'ASC',
        'no_found_rows' => true,
    );
    $res_cpt_allenamento = new WP_Query( $query_mostra_cpt_allenamento );
    $res_cpt_allenamento_after = new WP_Query( $query_mostra_cpt_allenamento_after ); ?>
   <div style="padding-top: 30px;" class="row">
    <?php if( $res_cpt_allenamento->have_posts() ) : ?>

            <?php while( $res_cpt_allenamento->have_posts() ) : $res_cpt_allenamento->the_post(); ?>

                <div style="padding-right: 0px;padding-left: 0px;border: 1px solid #fff" class="col-md-6">
                    <div class="view">
                        ...
                    </div>
                </div>

            <?php endwhile; ?>

    <?php endif;
    wp_reset_postdata();
    ?>
    <?php if( $res_cpt_allenamento_after->have_posts() ) : ?>
                <div style="padding-right: 0px;padding-left: 0px;border: 1px solid #fff" class="col-md-6">
                    <div class="container-fluid">
                        <div class="row">
            <?php while( $res_cpt_allenamento_after->have_posts() ) : $res_cpt_allenamento_after->the_post(); ?>

                    <div style="padding-right: 0px;padding-left: 0px;border: 1px solid #fff" class="col-md-6">
                        <div class="view">
                            ...
                        </div>
                    </div>

            <?php endwhile; ?>
                        </div>
                    </div>
                </div>
    <?php endif;
    wp_reset_postdata();
?>

    </div>

Another option is to add a counter in your while loop, check where you are and act accordingly:

<?php
    /*MOSTRA NEWS CPT ALLENAMENTO*/
    $query_mostra_cpt_allenamento = array(
        'post_type' => 'news-allenamento',
        'posts_per_page'    => 4,
        'orderby' => 'meta_value',
        'order' => 'ASC',
    );
    $res_cpt_allenamento = new WP_Query( $query_mostra_cpt_allenamento );
    $i = 0;
    if( $res_cpt_allenamento->have_posts() ) : ?>
        <div style="padding-top: 30px;" class="row">

            <?php  while( $res_cpt_allenamento->have_posts() ) : $res_cpt_allenamento->the_post(); $i++; ?>
                <?php if ($i < 2) : ?>
                    <div style="padding-right: 0px;padding-left: 0px;border: 1px solid #fff" class="col-md-6">
                        <div class="view">
                            ...
                        </div>
                    </div>
                <div style="padding-right: 0px;padding-left: 0px;border: 1px solid #fff" class="col-md-6">
                    <div class="container-fluid">
                        <div class="row">
                <?php else : ?>
                            <div style="padding-right: 0px;padding-left: 0px;border: 1px solid #fff" class="col-md-6">
                                <div class="view">
                                    ...
                                </div>
                            </div>
            <?php endwhile; ?>
                        </div>
                    </div>
                </div>
        </div>

    <?php endif;
    wp_reset_postdata();
    ?>

Not sure about the structure but this is the logic