I'm developing a bootstrap theme for wordpress, I'm new to php and I've been using ACF. I need to display 5 images, 2 of them side by side occupying 6 columns, and the others below, occupying 4 columns each. The problem is that I'm not getting the loop right, causing the images to appear one below the other stacked. How should I do?
<div class="row m-0">
<div class="col-12 p-0">
<ul class="nav nav-tabs" role="tablist">
<?php $conta = 1;
$args = array(
'taxonomy' => 'categoriaProduto',
'hide_empty' => 0,
'parent' => 0,
'order' => 'DESC'
);
$my_categories = get_categories($args); ?>
<?php foreach ($my_categories as $category) : ?>
<li class="nav-item"><a class="nav-link <?php echo $conta == 1 ? 'active' : ''; ?>" href="#produto<?php echo $conta; ?>" role="tab" data-toggle="tab"><?php echo $category->name; ?></a></li>
<?php $conta++;
endforeach; ?>
</ul>
<div class="tab-content">
<?php $conta = 1;
$args = array(
'taxonomy' => 'categoriaProduto',
'hide_empty' => 0,
'parent' => 0,
'order' => 'DESC'
);
$my_categories = get_categories($args); ?>
<?php foreach ($my_categories as $category) : ?>
<div role="tabpanel" class="tab-pane fade <?php echo $conta == 1 ? 'active show' : ''; ?>" id="produto<?php echo $conta; ?>">
<div class="row">
<div class="col-12 m-0">
<div class="slick-2 d-sm-flex flex-sm-wrap">
<?php $args = array(
'post_type' => 'produto',
'ordeby' => 'date',
'order' => 'DESC',
'posts_per_page' => 5,
'tax_query' => array(array(
'taxonomy' => 'categoriaProduto',
'field' => 'term_id',
'terms' => $category->term_id
))
);
$wp_query = new WP_Query($args);
$cont = 1;
if (have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<div class="<?php echo $cont <= 2 ? 'col-6 pb-3' : 'col-4'; ?>">
<a href="<?php the_field('produto_url'); ?>">
<picture>
<?php if (have_rows('destaques')) : ?>
<?php while (have_rows('destaques')) : the_row(); ?>
<?php $imagem = get_sub_field('imagem'); ?>
<?php if ($imagem) : ?>
<source media="(min-width:769px)" srcset="<?php echo esc_url($imagem['url']); ?>" alt="<?php echo esc_attr($imagem['alt']); ?>" />
<?php endif; ?>
<?php $imagem_mobile = get_sub_field('imagem_mobile'); ?>
<?php if ($imagem_mobile) : ?>
<source media="(max-width:768px)" srcset="<?php echo esc_url($imagem_mobile['url']); ?>" alt="<?php echo esc_attr($imagem_mobile['alt']); ?>" />
<?php endif; ?>
<img loading="lazy" class="img-fluid w-100 radius" src="" alt="">
<?php endwhile; ?>
<?php else : ?>
<?php ?>
<?php endif; ?>
</picture>
<img class="icon-plus" src="<?php bloginfo('template_directory'); ?>/assets/img/i-plus.svg">
</a>
</div>
<?php $cont++;
endwhile;
else : ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
</div>
</div>
</div>
<?php $conta++;
endforeach;
?>
</div>
</div>
</div>