Experiencing issues with aligning responsive divs using Bootstrap. Here is the code in question:
<div class="container-fluid">
<div class="row">
<div class="col-xl-5">
<img src="/images/big_img.jpg}"/>
</div>
<div class="col-xl-2 vs">
<img src="/images/small_img.jpg}"/>
</div>
<div class="col-xl-5">
<img src="/images/big_img.jpg}"/>
</div>
</div>
</div>
The CSS applied to this code is as follows:
.row {
text-align: center;
}
.col-xl-5 {
display:inline-block;
}
.col-xl-2 {
display:inline-block;
}
.vs img {
display: block;
height: auto;
width: 100%;
}
When viewed on full screen, the layout appears like this:
https://i.sstatic.net/IKkeZ.png
However, when viewed on a smaller screen, it looks like this:
https://i.sstatic.net/kAJae.png
I would like the layout to be like this on full screen:
https://i.sstatic.net/ZdlKz.png