https://i.sstatic.net/uxGVK.png
My current project involves creating responsive HTML code for the image above. Below is the code I have developed so far to achieve the desired design:
HTML:
<div class="container-fluid">
<div
class="row low-height box border bg-light justify-content-start align-content-start overflow-box"
>
<div class="col-1 border bg-primary small-box m-2"></div>
<div class="col-1 border bg-primary small-box m-2"></div>
</div>
<div
class="row low-height box border bg-light justify-content-end align-content-end"
>
<div class="col-1 border small-box bg-success m-1"></div>
</div>
<div
class="row low-height box border bg-light justify-content-center align-content-center"
>
<div class="col-lg-12 text-center"><h4>Title</h4></div>
</div>
</div>
CSS:
.box {
height: 200px;
margin-bottom: 10px;
}
.small-box {
height: 100px;
}
.overflow-box {
overflow: auto;
}
Issue:
When the browser height is less than 600px, the 3 main sections should be arranged horizontally as depicted in the image below.
I have been unable to solve this part of the project and couldn't find relevant information on the bootstrap site. It's possible that I am overlooking a fundamental aspect. Any assistance would be greatly appreciated.