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!

blank
  • 37
  • 1
  • 7

3 Answers3

2

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
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,403
  • 1
  • 14
  • 22
0

You can use css property Order:1; very simple. You can reorder in media queries or if you are using Bootstrap they have classes for it as well.use below link for it https://javascript.plainenglish.io/bootstrap-5-ordering-columns-and-gutters-a27190695b1f

Shuhail EV
  • 1
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/32034109) – Barry Michael Doyle Jun 22 '22 at 19:43
  • That link asks to download app. I think its a promotion link. – Sudhakar Krishnan Jul 25 '23 at 09:58