Re-order items when I hit a custom breakpoint [duplicate] - html

Question

This question already has answers here:
Order columns through Bootstrap4
(6 answers)
Closed 3 years ago.
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>

Answer 1

Add d-flex to your row container:
Add order-1 order-xl-0 to your the col you need to re-order

Answer 2

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>