Bootstrap & Laravel列在移动版本上中断

Question

有人能帮我解决我的问题吗。我有bootstrap产品行。在桌面上，它像往常一样每行显示3列，在移动设备上，它在第一行显示2列，在第二行显示1列。我需要它在手机上显示每行2列。

我的刀锋

​

.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-->

​

我试过了我在谷歌上找到的所有东西，但仍然不能修复它。

Answer 1

如果列的总和是奇数，它将在最后一行显示一列，因为它是最后一列。但是会有一个空的空位来放一个额外的列。

​

<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>

​