Reorganize div elements responsively using Bootstrap 5.0

Question

Reorganize div elements responsively using Bootstrap 5.0

Struggling with web design using HTML, CSS, and Bootstrap v5.0, I am facing an issue. I have three divs A, B, and C that I want to reorder responsively as shown in the image below. A consists of a h2 and p tag, B includes two buttons, and C displays an image. https://i.sstatic.net/9rnzU.png

Initially, I attempted to group A and B in col-lg-6 and C in another col-lg-6, but this approach is not suitable as the correct order for mobile view should be A-C-B as depicted in the picture.

I have looked into various solutions on StackOverflow related to this issue, but they were based on Twitter Bootstrap 3 or Bootstrap 4 (using push/pull classes). Some suggestions mention that in Bootstrap 5.0, we should use -order for such scenarios. However, despite my efforts, I failed to comprehend how -order functions even after reading the documentation.

If anyone could provide assistance with this problem, I would greatly appreciate it. Thank you!

html css bootstrap-5

Answer 1

Answer №1

If you want to make floats work alongside flexbox in Bootstrap 5, one way to achieve this is by "disabling" flexbox on specific breakpoints. You can implement this using Bootstrap 5 classes without the need for any additional CSS...

<div class="container">
    <div class="row g-3 d-flex d-md-block">
        <div class="col-md-6 float-start">
            <div class="card card-body">A</div>
        </div>
        <div class="col-md-6 float-end">
            <div class="card card-body tall">C</div>
        </div>
        <div class="col-md-6 float-start">
            <div class="card card-body">B</div>
        </div>
    </div>
</div>

Take a look at the Floats in Bootstrap 5 demo

Alternatively, you can utilize the new CSS-grid classes in Bootstrap 5. This method requires enabling $enable-cssgrid with SASS:

<div class="container">
    <div class="grid">
        <div class="g-col-md-6 g-col-12">
            <div class="card card-body">A</div>
        </div>
        <div class="g-col-md-6 g-col-12" style="grid-row: span 2;">
            <div class="card card-body tall">C</div>
        </div>
        <div class="g-col-md-6 g-col-12">
            <div class="card card-body">B</div>
        </div>
    </div>
</div>

Check out the CSS grid demo here

Related: Discover how to use Bootstrap with different order on mobile version

Answer 2

If you want to make floats work alongside flexbox in Bootstrap 5, one way to achieve this is by "disabling" flexbox on specific breakpoints. You can implement this using Bootstrap 5 classes without the need for any additional CSS...

<div class="container">
    <div class="row g-3 d-flex d-md-block">
        <div class="col-md-6 float-start">
            <div class="card card-body">A</div>
        </div>
        <div class="col-md-6 float-end">
            <div class="card card-body tall">C</div>
        </div>
        <div class="col-md-6 float-start">
            <div class="card card-body">B</div>
        </div>
    </div>
</div>

Take a look at the Floats in Bootstrap 5 demo

Alternatively, you can utilize the new CSS-grid classes in Bootstrap 5. This method requires enabling $enable-cssgrid with SASS:

<div class="container">
    <div class="grid">
        <div class="g-col-md-6 g-col-12">
            <div class="card card-body">A</div>
        </div>
        <div class="g-col-md-6 g-col-12" style="grid-row: span 2;">
            <div class="card card-body tall">C</div>
        </div>
        <div class="g-col-md-6 g-col-12">
            <div class="card card-body">B</div>
        </div>
    </div>
</div>

Check out the CSS grid demo here

Related: Discover how to use Bootstrap with different order on mobile version

Answer 3

Answer №2

To achieve this layout without the need for Bootstrap, you can utilize CSS grid. I have provided a sample for your reference.

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

#grid {
  display: grid;
  grid-template-rows: 3fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 'A C' 'B C';
  grid-gap: 1rem;
}
@media (max-width: 576px) {
  #grid {
    grid-template-rows: auto auto auto;
    grid-template-columns: auto;
    grid-template-areas: 'A' 'C' 'B';
  }
}
#a {
  grid-area: A;
  border: 1px solid black;
  text-align: center;
}
#b {
  grid-area: B;
  border: 1px solid black;
  text-align: center;
}
#c {
  grid-area: C;
  border: 1px solid black;
  text-align: center;
}

<div id="grid">
  <div id="a">A</div>
  <div id="c">C</div>
  <div id="b">B</div>
</div>

Alternatively, you can utilize Bootstrap's breakpoints in display utilities, as shown below:

#grid {
      grid-template-rows: 3fr 1fr;
      grid-template-columns: 1fr 1fr;
      grid-template-areas: 'A C' 'B C';
      grid-gap: 1rem;
    }
    @media (max-width: 576px) {
      #grid {
        grid-template-rows: auto auto auto;
        grid-template-columns: auto;
        grid-template-areas: 'A' 'C' 'B';
      }
    }
    #a {
      grid-area: A;
      border: 1px solid black;
      text-align: center;
    }
    #b {
      grid-area: B;
      border: 1px solid black;
      text-align: center;
    }
    #c {
      grid-area: C;
      border: 1px solid black;
      text-align: center;
    }

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55373a3a21262127342515607b647b65">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex d-sm-grid flex-column" id="grid">
  <div id="a">A</div>
  <div id="c">C</div>
  <div id="b">B</div>
</div>

Answer 4

To achieve this layout without the need for Bootstrap, you can utilize CSS grid. I have provided a sample for your reference.

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

#grid {
  display: grid;
  grid-template-rows: 3fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 'A C' 'B C';
  grid-gap: 1rem;
}
@media (max-width: 576px) {
  #grid {
    grid-template-rows: auto auto auto;
    grid-template-columns: auto;
    grid-template-areas: 'A' 'C' 'B';
  }
}
#a {
  grid-area: A;
  border: 1px solid black;
  text-align: center;
}
#b {
  grid-area: B;
  border: 1px solid black;
  text-align: center;
}
#c {
  grid-area: C;
  border: 1px solid black;
  text-align: center;
}

<div id="grid">
  <div id="a">A</div>
  <div id="c">C</div>
  <div id="b">B</div>
</div>

Alternatively, you can utilize Bootstrap's breakpoints in display utilities, as shown below:

#grid {
      grid-template-rows: 3fr 1fr;
      grid-template-columns: 1fr 1fr;
      grid-template-areas: 'A C' 'B C';
      grid-gap: 1rem;
    }
    @media (max-width: 576px) {
      #grid {
        grid-template-rows: auto auto auto;
        grid-template-columns: auto;
        grid-template-areas: 'A' 'C' 'B';
      }
    }
    #a {
      grid-area: A;
      border: 1px solid black;
      text-align: center;
    }
    #b {
      grid-area: B;
      border: 1px solid black;
      text-align: center;
    }
    #c {
      grid-area: C;
      border: 1px solid black;
      text-align: center;
    }

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55373a3a21262127342515607b647b65">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex d-sm-grid flex-column" id="grid">
  <div id="a">A</div>
  <div id="c">C</div>
  <div id="b">B</div>
</div>

Answer 5

Answer №3

To easily reorder elements, simply use the CSS property Order:1;. This can be done within media queries or by utilizing Bootstrap's pre-made classes designed for this purpose. For more information and examples, check out the following link:

Answer 6

To easily reorder elements, simply use the CSS property Order:1;. This can be done within media queries or by utilizing Bootstrap's pre-made classes designed for this purpose. For more information and examples, check out the following link:

Reorganize div elements responsively using Bootstrap 5.0

Answer №1

Answer №2

Answer №3

Similar questions

Combine the filter and orderBy components in AngularJS ng-options for a customized select dropdown menu

Using AngularJs, you can access the document.body.onfocus event within the controller of

Animate the transition between the icon and extended variant in Material-UI FAB

Ensure that the jQuery Knob is set to submit any modifications only after the final adjustment

Add extra space to the dimensions of the div by incorporating padding

JS Issue with Countdown functionality in Internet Explorer and Safari

How to send variables to a function when a value changes in TypeScript and Angular

bring in all the files located within the Directory

Combining 2 divs harmoniously

Is there a method in JS/jQuery to fill my input field with a constant string and ensure leading zeros are included?

Organize JSON information in a tabular layout

Gap in footer spacing on Internet Explorer is significantly large

The images in Bootstrap 5 are displayed individually on separate lines, even though they could easily be accommodated within a

Revamping CSS for a Responsive Wordpress Tesseract Theme

What is the best way to align HTML inputs within a grid, whether it be done automatically or manually using JavaScript?

Modify the appearance of the button

The functionality of a switch statement relies on the presence of a React-Router

Uneven column widths in Bootstrap 4 tables

Iframe not functioning properly on Internet Explorer versions 8-11 when using WordPress

Creating dynamic web content using PHP and JavaScript