移动设备上的卡片组视图

如何解决移动设备上的卡片组视图

目前我正在使用 bootstrap 4，我正在尝试为桌面和移动设备创建卡片组视图。

对于桌面，出于某种原因，如果 card-columns 中没有 card-deck 类，我无法制作 3 列 4 行的网格。

当我尝试从移动端查看时，它只显示 1 列。

代码如下：

<div class="container">
<div class="row justify-content-center">
    <div class="col-12">
        
        <div class="card-deck">
            <div class="card-columns">
                @foreach($items as $key => $item)
                <div class="card" style="background-color:#ffffff;">
                    <a class="stretched-link" href="#" data-toggle="modal" data-target="#productModal" onclick="removeErrors();showProductModal({!! $item['id'] !!});resetQuantity();"></a>
                    <div class="row">
                        <div class="col-12"> 
                        <img class="center size" src="{{URL::asset('images/product/27.jpeg')}}">
                        </div>
                        <div class="col-12">
                            <h6>{!! $item['name'] !!}</h6>
                        </div>
                        <div class="col-12">
                            <h6 class="text-danger">{!! config('app.currency').' '.($item['unit_price'] - $item['discount_amount']) !!}</h6>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>