Bootstrap 4: Reorder inner stacked columns on mobile screens - html

Question

Currently I'm working on a e-commerce section, so there is gonna be an aside that contains the filters and a "main" that must contains 6 items inside of individual cards. The problem is that when it is being displayed on mobile screens, the aside is removed (done) and the main should use all the grid of the screen and the individual cards half of that section (divided in 2 per row).
The problem is that I don't know how to do this without modify that much the classes of the cards, because on bigger screens (like iPads or similar) the content is already responsive.
I have already tried using a different set of combinations of grid classes in the columns as I show in the code below
<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>
The result must be as shown in the next picture where I draw a line that must be the other product card.
https://prnt.sc/nyj06y
Here you can check the currently state of the page: https://demos.posicionart.com/silleri/categoria.php

Answer 1

There is too much mistake in your code, for achieve your goal I made some changes.
These is the link where you see differences 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>
If you put this code in your CODE, it definitely works