0

I am having a problem when practice web-design with HTML, CSS using Bootstrap v5.0. Particularly, I have 3 divs A,B,C and I want them to responsively reorder as in the picture below. A is a h2 + p, B is 2 buttons, and C is an image. enter image description here

My first approach was to group A and B into a col-lg-6 and C into another col-lg-6, but this way is inappropriate since the code must follow the order A-C-B to have the mobile view as in the picture.

I have searched and tried multiple posts about this problem on StackOverflow, but the solutions were in Twitter Bootstrap 3 or Bootstrap 4 (using push/pull classes). Some answers say that in Bootstrap 5.0, we use -order for problems like this. But I tried and failed, I don't really understand how the -order works after reading the documents.

So could anyone please help me out with this problem? Thank you very much!

Bell
  • 37
  • 5

2 Answers2

1

The easiest way would be to "disable" flexbox on specific breakpoints which will allow the floats to work. This can be done using all Bootstrap 5 classes so there's no extra 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>

Floats in Bootstrap 5 demo

Alternately, you can use the new CSS-grid classes in Bootstrap 5. However this requires that you $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>

CSS grid demo

Related: Bootstrap with different order on mobile version

Zim
  • 329,487
  • 83
  • 671
  • 600
0

This can be achieved without Bootstrap with grid. I created a sample for you.

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 could use Bootstrap’s breakpoints in display utilities, like this: 

#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/bootstrap@5.1.0/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>
RatajS
  • 1,280
  • 1
  • 12
  • 20