Change Bootstraps column order for mobile while inside a loop - laravel

Question

Trying to change Bootstraps column order for mobile, .col-order doesn't work cause its in a loop. Have $loop->iteration set for displaying different backgrounds on column 1, 4 or 5 for desktop, but for mobile i need some way of displaying them stacked as odds or evens, thanks.
<div class="row no-gutters bg-light">
#foreach ($products as $product)
<div class="col-12 col-xl-6 div-wo-bg #if($loop->iteration === 1 || $loop->iteration === 4 || $loop->iteration === 5) div-w-bg #endif">
Have tried an if statement:
<div class="row no-gutters bg-light">
#foreach ($products as $product)
#if ('className' == 'col-12')
<div class="col-12 col-xl-6 div-wo-bg #if($loop->iteration === 1 || $loop->iteration === 4 || $loop->iteration === 5) div-w-bg #endif">
#elseif ('className' == 'col-xl-6')
<div class="col-12 col-xl-6 div-wo-bg #if($loop->odd) div-w-bg #endif">
#endif
This just throws all the column display out of wack (for both mobile and desktop).

Answer 1

Try this
<div class="row no-gutters bg-light">
#foreach ($products as $key => $product)
<div class="col-12 col-xl-6 div-wo-bg {{ $key == 1 ? 'div-w-bg' : ($key == 4 ? 'div-w-bg' : ( $key == 5 ? 'div-w-bg' )) }}">

Answer 2

<!-- Latest Products Showcase Section
- The showcase design calls for columns to be side by side for desktop, but stacked for mobile. There are 2 differently styled bg's repeated throughout the layout of the columns.
- Because these columns are layed out differently, they both require 2 different $loop extensions to retrieve the bg's. So from within an if statement we use $loop->iteration for desktop but $loop->odd for mobile -->
<!-- Desktop Layout -->
<div class="container-fluid p-0">
<div class="row showcase-shop-products no-gutters bg-light">
#foreach ($products as $product)
<div class="col-6 d-none d-lg-flex div-wo-bg #if($loop->iteration === 1 || $loop->iteration === 4 || $loop->iteration === 5) div-w-bg #endif">
<div class="container-fluid">
<div class="row">
<!-- Column a (Text) -->
<div class="col-6 showcase-col">
<div class="overlay"></div>
<div class="showcase-hero">
<h2 class="card-title mb-4">{{ $product->name }}</h2>
<h3 class="card-subtitle text-muted">{{ $product->details }}</h3>
<h4 class="mb-3">{{ $product->presentPrice() }}</h4>
<p class="card-text mb-4 d-lg-none d-xxl-block">Lorem ipsum dolor sit amet consectetur adipisicing elit. At dicta accusamus quia aliquid minima animi alias.</p>
Add to Cart
</div>
</div>
<!-- Column b (Image) -->
<div class="col-6 showcase-col">
<img class="card-img-top products-img img-fluid" src="{{ asset("img/shop/products/".$product->slug.".png") }}" alt="Random product item">
<div class="overlay"></div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
<!-- Mobile Layout -->
<div class="container-fluid p-0">
<div class="row showcase-shop-products no-gutters bg-light">
#foreach ($products as $product)
<div class="col-12 d-flex d-lg-none div-wo-bg #if($loop->odd) div-w-bg #endif">
<div class="container-fluid">
<div class="row">
<!-- Top Column (Image) -->
<div class="col-12 showcase-col">
<img class="card-img-top products-img img-fluid" src="{{ asset("img/shop/products/".$product->slug.".png") }}" alt="Random product item">
<div class="overlay"></div>
</div>
<!-- Bottom Column (Text) -->
<div class="col-12 showcase-col">
<div class="overlay"></div>
<div class="showcase-hero text-center pb-5">
<h2 class="card-title mb-4">{{ $product->name }}</h2>
<h3 class="card-subtitle text-muted">{{ $product->details }}</h3>
<h4 class="mb-3">{{ $product->presentPrice() }}</h4>
<p class="card-text mb-4 d-none xl-block">Lorem ipsum dolor sit amet consectetur adipisicing elit. At dicta accusamus quia aliquid minima animi alias.</p>
Add to Cart
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
Works perfectly now.