Arranging nested columns in a different order for smaller devices with Bootstrap 4

I am currently in the process of developing an e-commerce section, which includes an aside containing filters and a "main" section that should have 6 items displayed as individual cards. The challenge arises when viewing this on mobile screens, where the aside is hidden and the main section should utilize the full screen grid with each card taking up half of the section (2 cards per row).

The dilemma I face is how to achieve this without significantly modifying the card classes, especially since the content is already responsive on larger screens like iPads.

I have experimented with various combinations of grid classes for the columns as illustrated in the code snippet below:

<div class="row mr-5">
    <div class="col-4 col-lg-4 col-md-5" id="aside-categoria">
         // Aside content hidden using 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="Product Image">
                            <div class="card-body pl-0">
                                <h1>Product Name</h1>
                                <small>Environment</small>
                            </div>
                        </div>
                    </a>
                </div>
                // Additional columns similar to 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="Product Image">
                            <div class="card-body pl-0">
                                <h1>Product Name</h1>
                                <small>Environment</small>
                            </div>
                        </div>
                    </a>
                </div>
                // Additional columns similar to the one above
            </div>
        </div>
    </div>
</div>

The desired layout is depicted in the image link below, showcasing the alignment of the product cards.

To view the current state of the page, please visit:

Answer №1

Your code contains several mistakes that need to be addressed in order to achieve your goal. I have made some changes to help you with that.

Click on the following link to see the differences:

<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 hid 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="Representative Product Image">
                            <div class="card-body pl-0">
                                <h1>Product Name</h1>
                                <small>Environment</small>
                            </div>
                        </div>
                    </a>
                </div>
                // Two more columns like the one above go here
            </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="Representative Product Image">
                            <div class="card-body pl-0">
                                <h1>Product Name</h1>
                                <small>Environment</small>
                            </div>
                        </div>
                    </a>
                </div>
                // Two more columns like the one above go here
            </div>
        </div>
    </div>
</div>

By incorporating this revised code into your project, you should achieve the desired outcome.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

clicking on a DIV element

I am trying to trigger a JavaScript function by clicking on a DIV element, but for some reason it is not working as expected. I have gone through various examples provided by the helpful people here, but still can't figure out what I'm doing wron ...

CSS transitions/transforms are failing to impact the necessary elements

I'm currently grappling with advanced transitions and transforms, and encountering some challenges with a section I'm developing. I've managed to get everything working as needed, except for the fact that there is an h5 element positioned ov ...

Tips for preventing the sidebar from extending beyond the footer

I am facing an issue with my sidebar that follows as I scroll. How can I make it stop following when it reaches the footer? Here's what I have attempted so far: $(function() { var floatPosition = parseInt($("#left_menu").css('top')); ...

Create a moving background gradient with styled-components

Currently, I am working on setting the background of the <Paper /> component using Material-UI version 1.0.0-beta.25 to display a gradient of colors. The colors are dynamically added by clicking the Add button and selecting one from the color picker. ...

Text element in SVG not displaying title tooltip

Looking for a solution to display a tooltip when hovering over an SVG Text element? Many sources suggest adding a Title element as the first child of the SVG element. This approach seems to work in Chrome, but not in Safari - the primary browser used by mo ...

What's the best way to update the value of an angular field upon submission?

Could someone please provide instructions on how to update the myName variable when the "submit" button is pressed? Thank you! app.js: app.controller('SomeController', ['$scope', 'emails', function($scope, emails) { emails ...

Hidden visibility of input field prevents the value from being posted

I have a dropdown menu containing numbers as options. When a user selects a number, I want to display an input box using jQuery based on their selection. However, the issue arises when I try to submit the values of these input boxes as they are not being s ...

Including v-menu in a button causes it to vanish in Vuetify

I am facing an issue with my stepper. Specifically, in step 3, I am trying to add a v-menu to a button but when I do so, the button disappears. Below is the code snippet causing the problem: <template> . . . . <v-stepper-step :complete="e6 > ...

Having difficulty modifying the styling of a paragraph within a div container

I have been working on a function that is supposed to adjust the font-size and text-align properties of a paragraph located within a div tag once a button is pressed. function customizeText() { document.getElementById('centretext').innerHTML = ...

Using Javascript to open a new page and execute a script

I need to be able to launch a new window window.open(url,'_blank'); After that, I want to execute a JavaScript script like this: window.open(url,'_blank').ready("javascript code here"); However, I'm unsure how to accomplish thi ...

The sub menu in IE 8 does not stay open while hovering over it

My website has a navigation menu with a sub-menu that appears when hovering over the parent element. While this works smoothly on modern browsers, Internet Explorer 8 presents an issue. When hovering over the parent li element in IE 8, the sub-menu is disp ...

Get the image from the express route

Currently, I am running an express server with the following route: exports.getUserFile = function (req, resp) { let filePath = path.join(__dirname, 'storage', req.params.fileName); resp.download(filePath); }); } Within my web app ...

Steps for creating a dynamic progress bar with inverted text style using only CSS

I am working on creating a dynamic progress bar with inverted text color using only CSS. To see examples of what I am trying to achieve, you can refer to the following links. Inverted Colors CSS progress bar CSS Progress Bars https://i.sstatic.net/VSs5 ...

I am facing an issue with the responsiveness of the mat-card component within a div in

Is it possible to display several small paper cards in a div so that they wrap around the container? ...

The element is not defined in the Document Object Model

There are two global properties defined as: htmlContentElement htmlContentContainer These are set in the ngAfterViewInit() method: ngAfterViewInit() { this.htmlContentElement = document.getElementById("messageContent"); this.htmlContentCont ...

Here's a simple script to display a div or popup only once in the browser using plain vanilla JavaScript

// JavaScript Document I'm attempting to make a popup appear in the browser only once. I believe using local storage is the key, but all I can find are solutions involving jQuery. I really want to achieve this using plain JavaScript without relying ...

Trouble with AngularJs 1.x causing Bootstrap4 menu toggle collapse to malfunction

Issue with Navbar toggle menu not closing properly. I have attempted the solutions provided here and others in an effort to fix this bug. However, none of them seem to work for me. Here is a snippet of my code: <nav class="navbar navbar-expand-lg ...

What is the process for taking a website project running on localhost and converting it into an Android web application using HTML, CSS, and JavaScript

Looking for recommendations on how to create an Android web application using HTML, CSS, and JavaScript. Any suggestions? ...

Altering Image Order Across Various Slides

I have customized a parallax website template that is divided into various sections and slides. I want to incorporate a fixed image sequence on each slide that animates based on the scroll position. With 91 images in the animation sequence, it moves quickl ...

Complete a checkbox entry form and showcase it within a "division" on the current page

Hello everyone, I need some help. I have a form that I want to send to a specific div on the same page. This is what I am aiming for. I have a floating div named "basket" in the top right corner of my page where I want the form data to be displayed after s ...