Twitter Bootstrap Question posted in

Reorder divs with responsive in Bootstrap 5.0-Twitter bootstrap

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!

Tags:

3

Answers


  1. 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/[email protected]/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>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search