Re-order items when I hit a custom breakpoint

Question

I have four items with different sizes in a row. On extra-large screens everything looks fine. But when I hit large screens (1199.98px / bootstrap 'lg'), I need to re-order my div items.

The third div need to be the last. I also made a code pen for this

<!-- https://codepen.io/ibrahim-kunushefci/pen/OKJWzq -->

.hotelPr,
.hotelPr2,
.hotelPr3 {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background: #3161a3;
    border: 2px solid black;
}

.custom {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background: #bbbbbb;
}

<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="row">
    <div class="col-xl-2 col-lg-4">
        <div class="hotelPr">
            <p>Hotel</p>
        </div>
    </div>

    <div class="col-xl-2 col-lg-4">
        <div class="hotelPr2">
            <p>Hotel</p>
        </div>
    </div>

    <div class="col-xl-5 col-lg-10">
        <div class="custom">
            <p>This needs to be the last on small, medium and large screens. But not in extra large</p>
        </div>
    </div>

    <div class="col-xl-3 col-lg-4">
        <div class="hotelPr3">
            <p>Hotel</p>
        </div>
    </div>
</div>

check bootstrap documentation: https://getbootstrap.com/docs/4.0/utilities/flex/#order You can reorder columns as you wish. — cloned, Jul 18 '19 at 08:47

score 1 · Accepted Answer · answered Jul 18 '19 at 08:48

1

Add d-flex to your row container:

Add order-1 order-xl-0 to your the col you need to re-order

answered Jul 18 '19 at 08:48

Ethan Vu

2,911
9
25

There's no need to add `d-flex`.. The row is `display:flex`. – Carol Skelly Jul 18 '19 at 11:04

score 1 · Answer 2 · answered Jul 18 '19 at 08:56

You can specify the order of the displayed siblings on a parent flexbox element.

I changed the display of your .row div in a flexbox, and I added an order property to your col-xl-5 div.

.row{
  display: flex;
}

.hotelPr,
.hotelPr2,
.hotelPr3 {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background: #3161a3;
    border: 2px solid black;
}

.custom {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background: #bbbbbb;
}

.col-xl-5{
  order: 1; /* here */
}

<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="row">
    <div class="col-xl-2 col-lg-4">
        <div class="hotelPr">
            <p>Hotel</p>
        </div>
    </div>

    <div class="col-xl-2 col-lg-4">
        <div class="hotelPr2">
            <p>Hotel</p>
        </div>
    </div>

    <div class="col-xl-5 col-lg-10">
        <div class="custom">
            <p>This needs to be the last on small, medium and large screens. But not in extra large</p>
        </div>
    </div>

    <div class="col-xl-3 col-lg-4">
        <div class="hotelPr3">
            <p>Hotel</p>
        </div>
    </div>
</div>

Re-order items when I hit a custom breakpoint

2 Answers2