Reorganizing bootstrap columns for mobile devices

I am currently working on a specific layout design, which can be viewed https://i.sstatic.net/IjlHG.png.

Below is the code structure for this layout:

<div className="row">
  <div className="col">
    A
  </div>
  <div className="col-6">
    <div className="row h-50">
      B
    </div>
    <div className="row h-50">
      C
    </div>
  </div>
  <div className="col text-center my-auto">
    D
  </div>
</div>

On smaller screens, I want to rearrange the layout to look like what is shown https://i.sstatic.net/xy5T7.png.

I have explored using Bootstrap's pull and push classes, but most examples involve single rows with single columns. Since B and C are nested within another row in my case, I'm finding it challenging to implement the desired outcome smoothly.

cssbootstrap-4

Answer №1

To achieve this effect, you need to duplicate the first div 'A' and control its visibility based on screen size using col-sm.

Here is a demonstration of the concept:

.classA {
  background: red
}

.classB {
  background: yellow
}

.classC {
  background: green
}

.classD {
  background: blue
}

div{ text-align:center; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="row">
  <div class="col-12 col-sm-3 d-none d-sm-block classA">
    A (original)
  </div>
  <div class="col-12 col-sm-6">
    <div class="row">
      <div class="col-12 h-50 classB">
        B
      </div>
      <div class="col-12 d-block d-sm-none classA">
        A
      </div>
      <div class="col-12 h-50 classC">
        C
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-3 classD">
    D
  </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

React's sanitizer has refused these fonts

I've encountered font issues on my page while using react. Previously, everything was working fine but now I'm seeing the following error in the console. Attempted solutions like running npm audit --force (something along those lines). Addition ...

htmlcssreactjsfonts

Having trouble getting HTML to render properly in React JS on localhost using Apache server

For the past week, I've been working on resolving an issue. I started by creating a React Application using: npm create react-app After that, I attempted to build it with: npm run build Everything seemed to go smoothly. I generated a build folder ...

javascripthtmlcssreactjsapache

Tips for vertically centering elements in the header using flexbox

Within the header of my website, I have structured 3 separate divs - one for a logo, one for a search input, and one for a cart link. My goal is to align these 3 .col-md-4 divs in a vertically centered position. While these divs currently have an align-it ...

htmlcssbootstrap-4flexbox

Adjust the size and alignment of columns within a Bootstrap table by incorporating a nested table

My goal is to adjust the size and alignment of the header components within the thead section of an HTML table to match those of a nested table. The main table handles the alternating row colors, while the nested table enables me to organize the fields ac ...

htmlcsstwitter-bootstrapbootstrap-5

Enhancing Page Content Dynamism: Making Elements Static

I have a div element that I want to align on the right side of the screen, but the problem is that it doesn't adjust its position as the content dynamically expands and exceeds the width of the page. Despite conducting extensive research, I haven&apos ...

javascriptjqueryhtmlcss

CSS transitions do not function properly in Mozilla browsers

I have been attempting to create a hover animation transition on my website. It seems to work fine in Opera and Chrome, but not in Mozilla Firefox. Can anyone provide guidance on how to fix this issue? Here is the code I am currently using: HTML <a hr ...

htmlcssmozilla

Ways to rearrange items in the navigation bar?

I am working with a Bootstrap template and I am trying to adjust the layout to be right-to-left (RTL). Currently, when I set the site title to RTL in the navbar, the buttons in the navbar also switch to RTL alignment. This is not the desired layout I want. ...

javascripthtmlcssfrontendbootstrap-5

A layout with two columns, one of which has a minimum width

Can a two-column layout be created where one column has a minimum width value? Take a look at the following code: #container { width: 100%; max-width: 1200px; min-width: 960px; height: 600px; margin: 0 auto; } #sidebar { float: left; ...

htmlcss

Cut off a string from the start

I'm using the text-overflow: ellipsis property in a div to shorten lengthy text values. Since there is no white space in the URL, I want to prevent the overflow from increasing the width of the div. What I want to achieve is to display the following: ...

phpjqueryhtmlcss

unique design for custom scrollbar on dropdown menu

I'm looking to customize the scrollbar for a select box. I've experimented with the code below, but I want to avoid using the default scrollbar on the select box. Instead, I want to implement a custom scrollbar without using the size attribute on ...

htmltwitter-bootstrapcss

Tips for automatically closing submenus in a dropdown menu using Bootstrap 4

I am trying to figure out how to make sure that when I close my dropdown menu, the submenu within it also closes. Currently, the submenu remains open if I toggle the dropdown menu again. Visit this link for reference Here is the HTML code snippet: & ...

javascriptjqueryhtmlcssbootstrap-4

Creating an HTML Form Dropdown List that Redirects Users

As a budding web developer, I am in the process of creating a simple website. I have a query regarding how to extract a value from a drop-down list form in HTML, click the submit button, and get redirected to a new page based on the selection made. Specifi ...

htmlcss

Icons on the dropzone are displayed outside of the designated dropzone area

After using dropzone to upload multiple files, I noticed that the icons are displaying outside of the designated box. In the image below, the dropzone form is highlighted in yellow, but when I select numerous files, they overflow and appear outside the for ...

cssdropzone

Troubles with CSS Child Hover, Rotation, and Clipping in Pie Chart styling

The issue I am facing is with a 3-section pie chart where all sections look virtually identical. However, the :hover effect does not trigger on the first section, but it works on the other two. Each element has an equal number of overlapping parent divs, ...

htmlcsshoverclip

Ways to showcase your style using Bootstrap

Can you help me figure out how to align this sidebar properly? I tried using the d-flex property but it doesn't seem to be working for me. The sidebar should be on the left side and the two containers should be centered. For a clearer explanation, pl ...

htmlcssbootstrap-5

Tips on effectively utilizing CSS sprites without a border on images

I am currently working on optimizing my website by using sprite images. The image I am using is in png format and looks like this: https://i.sstatic.net/pFhPq.png Here is a snippet of my CSS code: .bg-upperbar_1 { width: 55px; height: 55px; bac ...

csssprite

Create a dynamic layout in Bootstrap that mimics a sleek two-column table design

After extensive online research, I have been unable to find what I am looking for. I apologize for the lack of clarity in my title, as the specifics of my query can be difficult to articulate. I possess a considerable amount of data from a SQL Server data ...

c#asp.netvb.netbootstrap-4

How to incorporate Bootstrap carousel into WordPress without relying on a plugin?

I've successfully integrated the bootstrap carousel into my Wordpress site. The slides are sourced from pages, with a specific page called "carousel" containing subpages where post-thumbnails are extracted. I'm still learning the ropes of using W ...

phpjquerywordpressbootstrap-4

Is there a way to create a header that fades out or disappears when scrolling down and reappears when scrolling up?

After spending some time researching and following tutorials, I have not made much progress with my goal. The task at hand is to hide the top header of my website when the user scrolls down and then make it reappear when they scroll back up to the top of t ...

javascriptcsshtml

Looking for a way to connect a background image in Vue CLI?

When running the code below, I encounter an issue. The code runs properly but the images are not displaying and instead showing the URL as unknown. How can I fix this problem? The images definitely exist. <template> <div class="slider">< ...

javascripthtmlcssvue.jswebpack