Can the layout of my page be modified for mobile in a specific manner using the Bootstrap 4 grid system?

At the moment, I have my bootstrap grid structured like this

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="A">
        A
      </div>
    </div>
    <div class="col-8">
      <div class="B">
        B
      </div>
      <div class="C">
        C
      </div>
    </div>
  </div>  
</div>

This results in a layout similar to this

https://i.sstatic.net/sQyll.png

I've been attempting to modify the bootstrap setup so that on an extra small screen, the grid transforms into this:

https://i.sstatic.net/OEuae.png

However, my efforts have not been successful. I have experimented with using the Order class to switch the order of columns, but I couldn't reorder the individual blocks within the second column. Another approach was splitting the second column into separate rows, but again, Order only seemed to work within columns. Is it possible to achieve this type of layout manipulation within the bootstrap grid system or would I need to utilize flex classes instead?

htmlcssbootstrap-4flexbox

Answer №1

Applying a custom class and using display:contents can offer relief for certain browsers:

An illustration of this concept

@media screen and (max-width:569px) {
  .d-sm-contents {
    display: contents
  }
  .order-top {
    order: -1;
  }
}

[class^="col"]>div {
  border: solid;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row ">
    <div class="col-sm-4 ">
      <div class="A">
        A
      </div>
    </div>
    <div class="col-sm-8 d-sm-contents">
      <div class="B col order-top">
        B
      </div>
      <div class="C col ">
        C
      </div>
    </div>
  </div>
</div>

Answer №2

To fully understand the layout, make sure to view the page in both full size and non-full size.

.row > div {
  display: grid;
}

.A {
  order: 2;
}

.B {
  order: 1;
}

.C {
  order: 3;
}

@media (min-width: 1024px) {
  .A {
    order: 1;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  
  .B {
    order: 2;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  
  .C {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="A">
        A
      </div>
      <div class="B">
        B
      </div>
      <div class="C">
        C
      </div>
    </div>
  </div>
</div>

Answer №3

One effective method to achieve this is by implementing the following approach:

.X{ background-color:green; width:100%}
.Y{ background-color:orange; }
.Z{ background-color:purple; }

div.row [class^="col"] {
    display:flex;
    margin:0px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="X">X</div>
        </div>
        <div class="col-sm-8">
            <div class="Y">Y</div>
            <div class="Z">Z</div>
        </div>
    </div>
</div>

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

The background banner is failing to display within the divbox

Having some trouble with my top banner in the HTML and CSS code I'm using to create a master page for ASP.NET. Oddly, the banner does show up on the design tab in Visual Studio, but it's not displaying properly. Here's the relevant code, can ...

asp.netcssimagehtml

Struggling with message tag issues

I am struggling to generate personalized messages based on user input, but I'm facing an issue where the alert button does not appear at all. Strangely, when I remove {% for message in messages %}, an empty alert button shows up. views.py: from dj ...

pythondjangobootstrap-4django-messages

Scrape data from websites where the main URL remains constant but the information in the table varies

If you take a look at this link, you'll notice that when the next page is selected, the table on the website gets reloaded with new content without any change in the URL. Even after inspecting the developer tools > Network > XHR, it's diffi ...

javascriptpythoncssajaxparsing

Is there a way to showcase interactive HTML content similar to an ePub or eBook without the need to convert the HTML into ePub

Looking to enhance the mobile reading experience with a responsive design similar to popular ebook readers like Kindle or iBooks? Want to break long articles into full-screen sections for easy navigation on small devices? Consider using dynamic HTML to ada ...

javascriptjqueryhtmlcss

When using selenium with python, the function excecute_script('return variable') may not technically return variables, even though the variable does exist

My attempt to retrieve a variable from javascript code using selenium is encountering difficulties. Despite the presence of the variable (confirmed by inspecting the source code before executing the script), the command driver.execute_script('return v ...

javascriptpythonhtmlpython-3.xselenium

``Are there any thoughts on how to troubleshoot display problems specifically on mobile

Whenever I use Safari on iOS for my web application, I encounter strange rendering issues. It's odd because the majority of the time everything functions as it should, but every now and then these bugs crop up with no discernible pattern. Examples th ...

cssvue.jssafarimobile-safari

Angular Placeholder Positioned at the Top

Hello, I am a beginner in Angular and need to create an input field that looks like this: https://i.sstatic.net/LUXfJ.png Everything is going fine except for the Vorname placeholder at the top. How can I place it there? Currently, I am utilizing Angular ...

htmlcssangular

Leverage Arrays with Bootstrap SelectPicker in Javascript

I am looking to populate a Bootstrap SelectPicker with values from an array. I am unsure of how to loop through the array to extract the values. Currently, I have manually added values to the SelectPicker like this. <!DOCTYPE html> <html> < ...

javascriptjqueryarraysbootstrap-4

What is the best way to use jQuery to adjust the size of a slider image based on a percentage of the browser window

I've been searching all over for a solution to this issue, but so far I haven't had any luck. Basically, I have an image that is 1800 pixels wide by 500 pixels high. I need this image to adapt to all screen resolutions. Instead of having a fixed ...

jqueryhtmlcss

Issue encountered when attempting to invoke a PHP function using Javascript through AJAX

I'm currently working on incorporating a PHP function into my HTML file using Ajax (which also contains JavaScript). My goal is to retrieve all locally stored JSON files. I've been following a guide at , but I'm facing some challenges. When ...

phpjavascripthtmlajax

Retrieving the chosen option using a change event listener

Is there a way to retrieve the selected option using a change listener in TypeScript? I have come across JavaScript examples where the value is retrieved through event., but I am unable to locate any field that contains the selected option. <!DOCTYPE ...

htmltypescriptformsevent-listener

Preventing Continuous Scrolling When a Popup Appears

I am struggling with keeping the scrolling disabled when a popup div is visible in the center of the screen. I have attempted to use an overlay in the browser, but it doesn't seem to be working. Any suggestions on how to achieve this using jQuery and ...

jqueryhtmlcss

Submenu fails to remain expanded

Having a minor issue with my dropdown menu. Whenever I hover over a link, the submenu pops out briefly but doesn't remain open. The issue seems to be related to the "content" div element, as removing it makes the menu functional. However, I can&apo ...

jqueryhtmlcssdrop-down-menu

Steps to create a function in a .js file that uses ng-show conditions

I am in the process of validating a web page where the user inputs must be alphanumeric, have a maximum length of 45 characters, and be unique. Below is the code snippet I am working with. Is there a way to consolidate these three ng-show conditions into ...

javascripthtmlangularjs

Struggling to get the Bootstrap Striped-table feature to work properly within a Vue

I am currently developing a friends component that displays a user's friends based on a response from an API endpoint. To showcase the responses in organized rows, I aim to utilize the bootstrap striped-table class for styling. You can find more inf ...

laraveltwitter-bootstrapvue.jsvuejs2bootstrap-4

Steps to create spaces between the bootstrap cards

Just diving into Bootstrap and attempting to incorporate images as cards, I encountered a challenge where the cards were piling up one after another without any spaces between them. Below is the code snippet utilizing Bootstrap4: <body> <div class ...

csstwitter-bootstrapbootstrap-4

Struggling to differentiate between the various CSS elements on a webpage and pinpointing the correct CSS for use

I have been attempting to replicate the "card-deck" layout that showcases eight cards on a specific webpage. After successfully copying the HTML structure by inspecting the card-deck class, I am now facing the challenge of locating the corresponding CSS ...

javascripthtmlcss

Adjust the size of the inner div to fit within its container based on the changing height of the footer positioned

I have a unique layout challenge with two stacked divs inside a container div. The container div has height: 100%, and the bottom inner-div has a dynamic height that changes based on its content. My goal is to make the top div take up the remaining space i ...

htmlcss

Utilize import and export statements to transfer an HTML tag between two JavaScript files

I have two HTML files linked to two JS files. I want to save an HTML tag from HTML1 with JS1 in a Variable and export it. Then import it in the JS2 file and use it in HTML2 I have tried many ways but nothing seems to work, something as simple as this Exp ...

javascripthtmlcssreactjsnode.js

Is there a way to execute a JavaScript function by clicking on an anchor tag?

Many websites, such as StackOverflow, have attempted to address this particular issue. However, the explanations provided are complex and difficult for me to grasp. I am looking for someone who can help identify my mistakes and explain the solution in simp ...

javascriptphphtmlmysql