Как показать два элемента в одной строке из массива элементов в html?

Question

У меня есть список предметов, а в webView я показываю 4 элемента в каждой строке. Но в mobileView я хочу показать 2 элемента в одной строке. Это мой html файл.

<div class="row my-3 cust-heading" style="margin-left: 39vh; margin-right: 39vh;">
    <div class="col-md-3 my-4 products" ng-repeat="product in productList track by $index" ng-if="$index<12">
        <div class="productList">
            <img class="product-image mb-2" src="{{product.imageLink}}" />
            <h6 class="product-name" style="font-size: 14px;">
                <b>{{product.productName}}</b>
            </h6>
            <small style="font-size: 11px; text-transform: uppercase;" ng-if="product.amountFlag==1"><strike>{{product.currencyCode}} {{product.commaSeparatedPrice}}</strike>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-{{product.discountAmount}}</small>
            <small style="font-size: 11px; text-transform: uppercase;" ng-if="product.amountFlag==0 && product.percentFlag==1"><strike>{{product.currencyCode}} {{product.commaSeparatedPrice}}</strike>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-{{product.discountPercent}}%</small>
            <div class="d-flex justify-content-between">
                <small style="font-size: 11px; text-transform: uppercase;color:coral" ng-if="product.amountFlag==1">{{product.currencyCode}} {{product.commaSeparatedFinalPrice}}</small>
                <small style="font-size: 11px; text-transform: uppercase;color:coral" ng-if="product.amountFlag==0 && product.percentFlag==1">{{product.currencyCode}} {{product.commaSeparatedFinalPrice}}</small>
                <small style="font-size: 11px; text-transform: uppercase;color:coral" ng-if="product.amountFlag==0 && product.percentFlag==0">{{product.currencyCode}} {{product.commaSeparatedPrice}}</small>
                <small style="font-size: 11px;"><a href="{{product.messengerLink}}"><i class="fab fa-facebook-messenger"></i> Buy</a></small>
            </div>
        </div>
    </div>
</div>

Это мой css медиазапрос:

@media (max-width: 425px) {
    .header-img {
        background-image: url('/img/bg-mobile-new.jpeg') !important;
    }
    .cus-button {
        text-align: center!important;
    }
    .cus-heading {
        padding-left: 15px!important;
    }

    .container {
        text-align: center
    }


  }

Это webView:

Вот как это выглядит в мобильном телефоне:

Что мне нужно сделать, чтобы показать 2 элемента в одном row в mobileView?

Answer 1

<div class="col-md-3 ...etc

Устанавливает ширину (в среднем разрешении) в 3 из 12 столбцов = 4

Вы можете установить значение по умолчанию в 2 столбца при более низком разрешении, делая это следующим образом:

<div class="col-6 col-md-3 ...etc

возможно, измените список продуктов на продукт, так как теперь l oop находится вокруг «списка»

Также: уберите в строке:

margin-left: 39vh; margin-right: 39vh;

, если вы хотите центрировать страницу используйте

<div class="container">...</div>

вокруг строки

проверьте: сетка bootstrap