Bootstrap 4: изменение порядка расположения столбцов на мобильных экранах

Question

В настоящее время я работаю над разделом электронной коммерции, так что там будет отдельный раздел, содержащий фильтры и «основной», который должен содержать 6 элементов внутри отдельных карточек.Проблема заключается в том, что когда он отображается на экранах мобильных устройств, сторонние элементы удаляются (готово), и основной должен использовать всю сетку экрана и половину отдельных секций карточек (разделенных на 2 на строку).

Проблема в том, что я не знаю, как это сделать без значительного изменения классов карт, потому что на больших экранах (например, iPad или аналогичных) контент уже реагирует.

У меня естьЯ уже пытался использовать другой набор комбинаций классов сетки в столбцах, как показано в приведенном ниже коде

<div class="row mr-5">
    <div class="col-4 col-lg-4 col-md-5" id="aside-categoria">
         // Here goes the aside that I already hidde with media queries
    </div>

    <div class="col-8 col-lg-8 col-md-7 col-sm-12" id="content-categoria">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-12 col-sm-12">
                    <a href="#" class="custom-card">
                        <div class="card categoria-image">
                            <img src="images/landing/categoria/galeria-escritorio-apolo.jpg" class="border border-dark image-responsive" alt="Imagen Representativa de producto">
                            <div class="card-body pl-0">
                                <h1>Nombre Producto</h1>
                                <small>Ambiente</small>
                            </div>
                        </div>
                    </a>
                </div>
                // Here goes 2 more columns like the one above
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-12 col-sm-12">
                    <a href="#" class="custom-card">
                        <div class="card categoria-image">
                            <img src="images/landing/categoria/galeria-escritorio-apolo.jpg" class="border border-dark image-responsive" alt="Imagen Representativa de producto">
                            <div class="card-body pl-0">
                                <h1>Nombre Producto</h1>
                                <small>Ambiente</small>
                            </div>
                        </div>
                    </a>
                </div>
                // Here goes 2 more columns like the one above
            </div>
        </div>
    </div>
</div>

Результат должен быть таким, как показано на следующем рисунке, где я рисую линию, которая должна быть другойкарточка продукта.

https://prnt.sc/nyj06y

Здесь вы можете проверить текущее состояние страницы: https://demos.posicionart.com/silleri/categoria.php

Answer 1

В вашем коде слишком много ошибок, для достижения вашей цели я внес некоторые изменения.

Это ссылка, по которой вы видите различия https://www.diffchecker.com/gVGBN0OY

<div class="row mr-md-5">
    <div class="col-4 col-lg-4 col-md-5" id="aside-categoria">
         // Here goes the aside that I already hidde with media queries
    </div>

    <div class="col-12 col-md-7 col-lg-8" id="content-categoria">
        <div class="container">
            <div class="row">
                <div class="col-6 col-sm-12 col-lg-4">
                    <a href="#" class="custom-card">
                        <div class="card categoria-image">
                            <img src="images/landing/categoria/galeria-escritorio-apolo.jpg" class="border border-dark image-responsive" alt="Imagen Representativa de producto">
                            <div class="card-body pl-0">
                                <h1>Nombre Producto</h1>
                                <small>Ambiente</small>
                            </div>
                        </div>
                    </a>
                </div>
                // Here goes 2 more columns like the one above
            </div>
            <div class="row">
                <div class="col-6 col-sm-12 col-lg-4">
                    <a href="#" class="custom-card">
                        <div class="card categoria-image">
                            <img src="images/landing/categoria/galeria-escritorio-apolo.jpg" class="border border-dark image-responsive" alt="Imagen Representativa de producto">
                            <div class="card-body pl-0">
                                <h1>Nombre Producto</h1>
                                <small>Ambiente</small>
                            </div>
                        </div>
                    </a>
                </div>
                // Here goes 2 more columns like the one above
            </div>
        </div>
    </div>
</div>

Если вы поместите этот код в свой КОД, он определенно будет работать