Shifting Bootstrap Columns into a New Configuration

I need to reorganize the columns on my bootstrap website. Currently, I have four images displayed like this:

However, when the screen size is reduced below 768px, I want them to be rearranged as follows:

I considered using bootstraps push-pull feature, but it seems that option is no longer available in bootstrap 4.

Any assistance with this issue would be greatly appreciated.

<!--top photos -->
<div class="row" id="top_photos_div">                                  
    <div class="col-sm-3">
        <img src="photos/top_photos/busy_bee.JPG" class="img-full-width_height" alt="bee" />
    </div>
    <div class="col-sm-3">
        <img src="photos/top_photos/midsummer_skies.JPG" class="img-full-width_height" alt="midsummer sunset" />
     </div> 
    <div class="col-sm-3">
        <img src="photos/top_photos/swans.jpg" class="img-full-width_height" alt="swans" />
    </div>
    <div class="col-sm-3">
        <img src="photos/top_photos/wood.jpg" class="img-full-width_height" alt="a forest" />
    </div>
</div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Based on the screenshots provided, it seems like you do not need to rearrange the images order while at a breakpoint.

Simply replace all instances of col-sm-3 classes with col-6 col-md-3. This will display your images as 2 rows by 2 columns on narrow screens and revert to a single row when the screen width reaches 768 pixels or higher.

Refer to https://getbootstrap.com/docs/4.6/layout/grid/#grid-options for more information.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05676a6a71767177647545312b332b35">[email protected]</a>/dist/css/bootstrap.min.css">

<div class="container">
    <!--top photos -->
    <div class="row" id="top_photos_div">
        <div class="col-6 col-md-3">
            <img class="img-full-width_height" src="photos/top_photos/busy_bee.JPG" alt="bee">
        </div>
        <div class="col-6 col-md-3">
            <img class="img-full-width_height" src="photos/top_photos/midsummer_skies.JPG" alt="midsummer sunset">
        </div> 
        <div class="col-6 col-md-3">
            <img class="img-full-width_height" src="photos/top_photos/swans.jpg" alt="swans">
        </div>
        <div class="col-6 col-md-3">
            <img class="img-full-width_height" src="photos/top_photos/wood.jpg" alt="a forest">
        </div>
    </div>
</div>

Answer №2

Experiment with the following:

<div class="row" id="top_photos_div">
    <!--top photos -->
    <div class="col-md-6">
        <div class="row">
            <div class="col-sm-6">
                <img src="~/photos/top_photos/busy_bee.JPG" class="img-full-width_height" alt="bee" />
            </div>
            <div class="col-sm-6">
                <img src="~/photos/top_photos/midsummer_skies.JPG" class="img-full-width_height" alt="midsummer sunset" />
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="row">
            <div class="col-sm-6">
                <img src="~/photos/top_photos/swans.jpg" class="img-full-width_height" alt="swams" />
            </div>
            <div class="col-sm-6">
                <img src="~/photos/top_photos/wood.jpg" class="img-full-width_height" alt="a forest" />
            </div>
        </div>
    </div>
</div>

Here is the CSS I used for img-full-width_height so you can see how it was styled.

<style>
    .img-full-width_height {
        height: 170px;
        padding: 5px;
    }
</style>

Essentially, instead of having a single column in the main row for all the photos, there are two columns set to use the col-md-6 class each.

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

What is the best way to manage the back button functionality on pages that use templates?

I am currently developing a website using angularjs. The layout consists of two main sections: the menu and the content area. For instance This is an example page: /mainpage <div> <div id="menu"> <div ng-click="setTemplate('fi ...

javascripthtmlangularjs

What is the best way to shift my content to the next line once it reaches a specific width in my paragraph

When a string is pulled from a database and inserted into a paragraph, it breaks perfectly if the paragraph has spaces. However, if a word is longer than the line, it goes off the page. How can I make it wrap to the next line instead of overflowing off the ...

phphtmlcss

Controlling screen size in fullscreen mode for HTML5 videos: a guide to manipulation

Within my website, I have incorporated a <video> element nestled inside a <div>. This particular <div> serves the purpose of defining the video aspect ratio, allowing users to adjust it if necessary (for instances where the encoded video ...

csshtmlvideofullscreen

Font appearance varies between Chrome and Firefox browsers

I'm relatively new to the world of web development and have encountered an issue with a menu I created. The buttons in the menu have varying widths depending on the browser being used – Firefox or Chrome. In Firefox, the last button in the menu lin ...

htmlcssgoogle-chromefirefoxfonts

How can I make sure to consider the scrollbar when using viewport width units?

I've been working on developing a carousel similar to Netflix, but I'm facing an issue with responsiveness. I've been using a codepen example as a reference: Check out the example here The problem lies in the hardcoded width and height use ...

javascriptcss

Use CSS properties to isolate and extract the logo from the Sprite image

If we have a sprite image, like the StackOverflow sprite, and CSS properties like: background-position: 0px 0px; width: 250px; height: 61px; We can use the Chunky PNG library to crop out a specific part of the sprite. However, some websites use negative ...

cssrubybackground-imagechunkypng

What steps should I take to resolve the issue with my various layouts in Thymleaf?

Encountering an issue while trying to incorporate another fragment from a layout page that contains two fragments. One is for the header and the other for a post form. Including just the first one results in a problem, but adding the second one leads to tw ...

javahtmlspringspring-bootthymeleaf

uncertainty about the process of deleting an HTML dropdown item element

I'm in the process of building a dynamic menu that changes based on whether a user is logged in on a webpage. Check out the HTML code I've used (Bootstrap 4): <div class="dropdown" id="account_info"> <butto ...

javascriptbootstrap-4dropdown

Insert data into the corresponding input box by selecting a checkbox with the same class individually

How can I place the value of checked checkboxes into different input boxes with the same class? Currently, the value of all input boxes with the same class reflects the value of the checked checkboxes. I am looking for a way to assign the value in input bo ...

javascriptjqueryhtmlcheckbox

Guide to designing a Bootstrap footer that appears only at the bottom of the page and not at the top

I am facing a challenge with my website where some pages have a lot of elements causing scrolling, while others have only a few elements without scrolling. My goal is to have a footer that stays at the bottom of the page regardless of the page size. The f ...

htmlbootstrap-5

Ways to monitor and measure clicks effectively

Within my website, I have a table element with one column and numerous rows. Each row serves as a hyperlink to an external shared drive. <tr><td ><a href="file://xxx">Staff1</a></td></tr> <tr ><td ><a h ...

javascripthtml

Include a "Click for more" and "Click to collapse" button on all thumbnails, not limited to just one

I am struggling to make the toggle script below work for all thumbnails in the gallery, not just the first thumbnail. Each card is filled with paragraphs, bullets, and links, making the page overwhelming. That's why I need the "Read More" and "Read Le ...

jqueryhtml

The function of page-break-after: always is not functioning correctly

I want the Div with class questions_visual to appear on the second page when printing. <html> <head> <title>quiz</title> <link rel="stylesheet" href="style.css"> </head> <body> < ...

htmlcssmedia-queries

Operating my application on a 2G network

Overview of my mobile application: I have created a simple HTML/CSS/JavaScript-jQuery app using PHONEGAP. The app utilizes a WCFService on a server for database communication, which is accessed through AJAX calls. After building and testing the applicati ...

jqueryhtmlmobilemobile-application

Tips for replacing default arrow icons with 'Previous' and 'Next' buttons in a Material-UI pagination element

I've been struggling to find a solution with my code provided below. Despite multiple attempts, the issue remains unresolved. import React from "react"; import { gridPageCountSelector, gridPageSelector, gridPageSizeSelector, useGridA ...

javascriptcssreactjsmaterial-uimui-x-data-grid

Is there a way to eliminate a div and all its contents from the DOM?

As I work on my web application, I am trying to implement a system where error messages can be returned via ajax upon success or failure. The ajax script is functioning correctly in terms of returning errors or successes. However, my challenge lies in com ...

javascriptjqueryhtmlcssajax

Container beyond div

Having an issue with the div extending beyond the container in Bootstrap 4. When a green div reaches the edge of the page, instead of being cut off it causes a horizontal shift in the page layout. How can this be avoided? Appreciate any assistance. Live ...

htmltwitter-bootstrapcssbootstrap-4

anticipating the completion of a task in order to proceed with the next one

I have been attempting to sequence the execution of two functions, but both are running concurrently with my main function. The console is displaying 2, then 1, when it should be 1 first. How can I make sure that the complete function waits for fetchingFun ...

javascriptjqueryhtmlajaxasynchronous

I aim to display a well-optimized mobile view by utilizing Bootstrap CSS

I need my website to be mobile responsive and I want the mobile view to have specific changes. Simply adding cd-xs-12 or even cd-sm-12 is not achieving the desired outcome. https://i.sstatic.net/0GU2h.jpg This is the current code I have: ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for organizing unordered list items into columns, with the text aligned at the top

I typically utilize the following method to arrange my list items into columns: ul.col-list > li {width: 30%; display: inline-block;} However, I have encountered an issue where if the text within a list item overflows onto the next line, it pushes dow ...

css