Bootstrap & Laravel columns breaks on mobile version - html

Question

Can anybody help me fix my problem. I have bootstrap product rows.
On the desktop it shows 3 columns per row as it should, on mobile it shows 2 columns on the first row, and 1 column on the second. I need it to show 2 columns per row on mobile.
My blade
.pad-10 {
padding: 10px;
#media (min-width: 576px)
.col-sm-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
<!-- Products Row -->
#php
$counter = 1;
#endphp
#foreach($products as $product)
#if($counter == 1 or $counter > 3)
<div class="row">
#endif
<div class="col-md-4 col-sm-6 pad-10">
<div>
#php
if($product->order_price != 0){
$percent = (($product->order_price - $product->sell_price)*100) / $product->order_price;
} else {
$percent = 0;
}
$percentage = round(abs($percent)) ?: 0;
#endphp
<a href="{{ url('product/' . $product->id) }}" class="a-prod">
<div class="card product">
<div class="img-prod">
<img class="card-img-top" src="{{ asset('storage/' . $product->main_image) }}" alt="Card image cap">
#if($percentage)
<div class="discount-block-mobile">-{{ $percentage }}%</div>
#else
<div class="new-block-m">New</div>
#endif
</div>
<!---------------------- -->
<div class="card-body cr-body-paddyng-max">
<a href="" class="a-prod">
<div class="col-sm-12 pb-4">
<div class="row">
<div class="col-6 p-0 mobile-col-6">
<p class="p-prod-font">{{ $product->name }}</p>
<span class="p-prod-font">{{ $product->second_name }}</span>
</div>
<div class="col-6 p-0 mobile-col-6">
#if($percentage)
<div class="price-5">{{ $product->order_price }} MDL</div>
#endif
<div class="price-6 mr-2">{{ $product->sell_price }} MDL</div>
#if($percentage)
<span class="disc-block">-{{ $percentage }}%</span>
#else
<span class="new-block">New</span>
#endif
</div>
</div>
</div></a>
<div class="col-sm-12 p-0 size-blocks d-n ">
<div class="row prod-row">
<div class="size-head d-n">Размер</div>
<div class="radio-toolbar">
<input type="radio" id="radioApple" name="chosen_size" value="S">
<label for="radioApple">S</label>
<input type="radio" id="radioBanana" name="radioFruit" value="banana">
<label for="radioBanana">S</label>
<input type="radio" id="radioOrange" name="radioFruit" value="orange">
<label for="radioOrange">M</label>
</div>
</div>
</div>
<div class="col-sm-12 p-0 butt-pr-block d-n">
<div class="row">
<div class="col-12 p-0">
</div>
</div>
<div class="row">
<div class="col-6 p-0 ">
<a href="{{ url('product/' . $product->id) }}" class="btn prod-btn b-1 waves-effect waves-light">
Подробнее
</a>
</div>
<div class="col-6 p-0 ">
<div class="btn btn-primary prod-btn b-1 waves-effect waves-light cart-btn add-to-cart" data-toggle="modal" data-target="#addToCart" data-id="{{ $product->id }}">
<span style="color:#fff; font-weight:bold;">В корзину</span>
</div>
</div>
</div>
</div>
</div>
<!------------------------->
<div class="card-body cr-body-padding-max d-none">
<div class="col-sm-12 pb-4">
<div class="row">
<div class="col-12 p-1">
<p class="p-prod-font">{{ $product->name }}</p>
<span class="p-prod-font">{{ $product->second_name }}</span>
</div>
#if($percentage)
<div class="col-6 p-0 mobile-col-6" style="margin-top: -5%;">
#else
<div class="col-6 p-0 mobile-col-6">
#endif
#if($percentage)
<div class="price-5">{{ $product->order_price }} MDL</div>
#endif
<div class="price-4 mt-2">{{ $product->sell_price }} MDL</div>
#if($percentage)
<span class="disc-block">-{{ $percentage }}%</span>
#else
<span class="new-block">New</span>
#endif
</div>
</div>
</div>
<div class="col-sm-12 p-0 size-block">
<div class="row prod-row" style="display:none;">
<div class="col-2 p-0">
<p class="p-size">Размер</p>
</div>
<div class="col-10 p-0 text-right">
<label for="sizeChoiceXXS" class="border-hov-size">
<input type="radio" id="sizeChoiceXXS" name="sizeProd"
value="XXS">
XXS</label>
<label for="sizeChoiceXS">
<input type="radio" id="sizeChoiceXXS" name="sizeProd"
value="XS">
XS</label>
<label for="sizeChoiceS">
<input type="radio" id="sizeChoiceS" name="sizeProd" value="S">
S</label>
<label for="sizeChoiceM">
<input type="radio" id="sizeChoiceM" name="sizeProd" value="M">
M</label>
<label for="sizeChoiceL">
<input type="radio" id="sizeChoiceL" name="sizeProd" value="L">
L</label>
<label for="sizeChoiceXL">
<input type="radio" id="sizeChoiceXL" name="sizeProd"
value="XL">
XL</label>
<label for="sizeChoiceXXL">
<input type="radio" id="sizeChoiceXXL" name="sizeProd"
value="XXL">
XXL</label>
<label for="sizeChoiceXXXL">
<input type="radio" id="sizeChoiceXXXL" name="sizeProd"
value="XXXL">
XXXL</label>
</div>
</div>
</div>
<div class="col-sm-12 p-0 butt-pr-block">
<div class="row">
<div class="col-12 p-0 ">
<a href="{{ url('product/' . $product->id) }}" class="btn prod-btn b-1 d-none d-sm-block">
Подробнее
</a>
</div>
<div class="col-6 p-0 d-none">
<button class="btn prod-btn b-2 add-to-cart" data-id="{{ $product->id }}">
В корзину
</button>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
#if($counter == 0 OR $counter == 3)
</div>
#endif
#if($counter == 3)
#php
$counter = 0;
#endphp
#endif
#php
$counter++;
#endphp
#endforeach
</section>
<!--Products-->
Tried everything I found on google and still cant fix it.

Answer 1

If columns add up to an odd number, it will show one column in the last row since it's the last column.. but there will be an empty slot for an additional column.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-6 col-md-4">Col 1, 3 on desktop, 2 on small sc</div>
<div class="col-6 col-md-4">Col 2, 3 on desktop, 2 on small sc</div>
<div class="col-6 col-md-4">Col 3, 3 on desktop, 2 on small sc</div>
</div>