Output of goods "3 in a row"?

Question

PHP

Good day! In general, the problem is this: the products are not arranged 3 in a row, but each in a separate row
How it looks:
How it should look:
How php outputs:

<div class="container catalog"> 
<div class="row shoes">
<a class="col-4 fash" href="#">
<img src="#">
</a>
</div> (Дальше идет повторение второго div'a)

How to display correctly:

<div class="container catalog"
   <div class="row shoes">
      <a class="col-4 fash" href="#">
           <img src="#">
     </a>
     <a class="col-4 fash" href="#>
            <img src="#" height="500">
     </a>
     <a class="col-4 fash" href="#>
        <img src="#" height="500">
</a>

Through wp_query I do not quite understand how to do this:

<?php $loop = new WP_Query( array(
'post_type' => 'product',
'posts_per_page' => 6,
'orderby' => 'menu_order',
'order' => 'ASC',
));
?>
<div class="container catalog"> 
<?php while ( $loop->have_posts() ): $loop->the_post(); ?>
<div class="row shoes">
<a class="col-4 fash" href="<?php the_permalink(); ?>">
<img src="<?php $id = get_post_thumbnail_id(); $url = wp_get_attachment_image_src($id, true); echo $url[0];?>">
</a>
</div>
<div class="row text">
<div class="col-4">
<p class="name">
<?php the_title(); ?>
</p>
<?php the_content(); ?>
<p class="price">
<?php _e("Цена:","examp"); ?>
<?php woocommerce_template_loop_price(); ?>
</p>
<?php woocommerce_template_loop_add_to_cart(); ?>
</div>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>

Answer 1

<div class="container catalog">
  <div class="row shoes">
    <?php while ( $loop->have_posts() ): $loop->the_post(); ?>
    <div class="col-4">
                       // картинка
      <a class="col-12 fash" href="<?php the_permalink(); ?>">
        <img src="<?php $id = get_post_thumbnail_id(); $url = wp_get_attachment_image_src($id, true); echo $url[0];?>">
      </a>
                      // название товара
      <p class="name">
        <?php the_title(); ?>
      </p>
                     // описание товара
      <div class="col-12">
        <?php the_content(); ?>
      </div>
                     // цена товара
      <p class="price">
        <?php _e("Цена:","examp"); ?>
        <?php woocommerce_template_loop_price(); ?>
      </p>
                      // кнопка добавить в корзину
      <?php woocommerce_template_loop_add_to_cart(); ?>
    </div>
    <?php endwhile; wp_reset_postdata(); ?>
  </div>
</div>

PS because of
<div class="col-4">
the product card allocated for the block, it will look like shit on mobile phones, it makes sense to add col-sm-12 col-md-6 classes there.
PPS Correct the order of the blocks yourself now it's not difficult to figure it out