Having four items with varying sizes lined up in a row can present some challenges. While larger screens may display them perfectly, issues arise on large screens (1199.98px/bootstrap 'lg') that require re-ordering of the div items.
Specifically, the third div needs to be positioned at the end. To illustrate this, I have created a corresponding code pen.
<!-- 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>