How to reorder elements using bootstrap 4?

Question

I have a simple section in which I want to display nested elements using bootstrap.

Here is what I have so far

HTML ;

<div class="container">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-8 order-1 float-left">
            <div class="card card-body tall">2</div>
        </div>
        <div class="col-lg-4 order-0 float-left">
            <div class="card card-body">1</div>
        </div>
        <div class="col-lg-4 order-1 float-left">
            <div class="card card-body">3</div>
        </div>
    </div>
</div>

This give me this result

desktop version

--------- ------
|   2   ||  1  |
|       ||     |
|       |-------
|       ||  3  |
|       ||     |
|       |-------
|       |
|       |
---------

No I want the same but reversed , something like this

  --------- ---
    |  1  | | 2 |
    |     | |   |
    ------- |   |
    |  3  | |   |
    |     | |   |
    ------- |   |
            -----

mobile version (stacked in order) like this

 --------
    |  1   |
    |      |
    --------
    |  2   |
    |      |
    |      |
    |      |
    |      |
    |      |
    --------
    |  3   |
    |      |
    --------

I tried to use float-right but unfortunately, it's not working

what do I need to change to get what I want?

Abdelillah Aissani · Accepted Answer · 2019-07-26T23:04:54.523

Just bring your larger column (2nd) between the other columns (1st and 3rd) so they stack up over each other and the larger column (2nd) will implicitly take the available space , here is a snippet that you can expand to a full screen to see the expected behavior or as a small one (smaller devices):

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
  <div class="row d-flex d-lg-block">
    <div class="col-lg-4 order-0 float-left">
      <div class="card card-body">1</div>
    </div>
    <div class="col-lg-8 order-1 float-left">
      <div class="card card-body tall">2</div>
    </div>
    <div class="col-lg-4 order-1 float-left">
      <div class="card card-body">3</div>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Jul 27 '19 at 00:10

The margin-top: -50px; removes the space which is from the third element not the first. add that to your css and use media Queries to remove it at your desired break-point.

<style>
.item-3{
margin-top:-50px;
}

@media screen and (max-width: 991px) { 
.item-3{
margin-top: 0px;
}
 }

</style>
<div class="container">
  <div class="row d-flex d-lg-block">
    <div class="col-lg-4 order-0 float-left">
      <div class="card card-body">1</div>
    </div>
    <div class="col-lg-8 order-1 float-left">
      <div class="card card-body tall">2</div>
    </div>
    <div class="col-lg-4 order-1 float-left item-3">
      <div class="card card-body">3</div>
    </div>
  </div>
</div>

How to reorder elements using bootstrap 4?

2 Answers2