Html 如何防止bootstrap4在mobile view上的行上堆叠，而是每行放置2行？

因此，我当前的行显示如下：

但是，在移动设备上，每行的图像都显得非常大，占用了太多的空间，因此我希望每行显示2行（仅在移动设备上，或者如果更容易做到这一点，那么在桌面上也可以）。所以我想在手机上看到如下内容：

下面是我的代码，bootstrap4用于CSS。我从中获得了示例，并对其进行了修改：

您的购物车（{count（\Cart:：content（））}}个项目）
@如果（计数（\Cart:：content（））>0）
@foreach（\Cart:：content（）作为$row）
选项->图像}“alt=”示例“>
{{$row->name}
SKU-{{{$row->id}
大小写：{{{$row->options->factor}
@对于（$i=1；$i{{$i}}
@结束

@endforeach
huh

谢谢

编辑：

---

此外，如果上述方法不可行，我也不介意在移动设备上保留该行的图像，以便在移动设备上保留左侧和右侧的所有信息。这样我还可以节省一些空间。

NVM修复了它。将图像的列大小更改为列4，文本的列6。

<div class="content text-dark" style="padding-bottom: 10px">
    <h3 style="color: black">Your Cart ({{ count(\Cart::content()) }} items)</h3>
</div>

@if (count (\Cart::content()) > 0)
    <!--Grid row-->
    <div class="row">

        <!--Grid column-->
        <div class="col-lg-8">

        @foreach(\Cart::content() as $row)
            <!-- Card -->
                <div class="container">
                    <div class="row justify-content-md-center">
                        <div class="col-md-5 col-lg-3 col-xl-3">
                            <div style="padding-bottom: 10px">
                                <img
                                    src="{{ $row->options->image }}" alt="Sample">
                            </div>
                        </div>
                        <div class="col-md-7 col-lg-9 col-xl-9">
                            <div>
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h5>{{ $row->name }}</h5>
                                        <p class="mb-3 text-muted text-uppercase small">SKU - {{ $row->id }}</p>
                                        <p class="mb-2 text-muted text-uppercase small">Case of: {{ $row->options->factor }}</p>
                                    </div>
                                    <div>
                                        <div class="def-number-input number-input safari_only mb-0 w-100">
                                            <select name="quantity" class="custom-select text-center quantity"
                                                    id="quantity" data-id="{{ $row->rowId }}">
                                                @for ($i = 1; $i <= 20; $i++)
                                                    <option
                                                        value="{{ $i }}" {{$row->qty == $i  ? 'selected' : ''}}>{{ $i }}</option>
                                                @endfor
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <a href="{{ route('cart.remove', $row->rowId) }}" type="button"
                                           class="card-link-secondary small text-uppercase mr-3"><i class="fas fa-trash-alt mr-1"></i> Remove item </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr class="mb-4">

                </div>
            @endforeach
        </div>
        <!--Grid column-->
        <div class="col-lg-4">
            <p class="text-primary mb-0"><i class="fas fa-info-circle mr-1"></i> huh .............</p>
            <!-- Card -->
            <div class="mb-3">
                <div class="pt-4">
                    <a href="{{ route('cart.checkout') }}">
                        <button type="button" class="btn btn-primary btn-block">Complete Checkout</button>
                    </a>
                </div>
            </div>
            <!-- Card -->

        </div>
        <!--Grid column-->

    </div>
    <!-- Grid row -->