Issue converting container rows into columns for responsiveness - html

Question

I am working on writing the html for the above image with responsiveness. Below is my code for the design so far
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;
}
Problem:
For the browser height lower than 600px, the 3 main sections should become horizontally arranged as shown in the below image.
This is the part I am unable to solve and cant find anything on the bootstrap site as well. May be I am doing something wrong fundamentally. Please help.

Answer 1

You can add a media query in your css,
#media(max-height:600px) {
//here you can write your custom css for that condition
//in this case,
[class*="col"]{
width:33%!important;
}
}
Here's an example
#media(max-height:600px) {
[class*="col"]{
width:33%!important;
}
}
.box {
text-align:center;
padding:5rem;
background-color: #22ccff;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="px-lg-12 px-md-12 px-sm-12">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 mb-4">
<div class="box">Box-1
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 mb-4">
<div class="box">Box-2
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 mb-4">
<div class="box">Box-3
</div>
</div>
</div>
</div>
</div>

Answer 2

Instead of putting each of the three grey boxes in its own row, they should be cols within a responsive Boostrap grid.
I've updated your code to put each of those grey boxes in a <div class="col-4 col-sm-12" ...> to make them format to 3 columns on XS screens, and 1 column on all larger size screens per your request. (Although that's backwards from how responsive sites usually work: usually on the smallest screen size the grid collapses to one column, and on larger sizes the grid expands to more columns.)
.box {
height: 200px;
margin-bottom: 10px;
}
.small-box {
height: 100px;
}
.overflow-box {
overflow: auto;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-4 col-sm-12 low-height box border bg-light justify-content-start align-content-start overflow-box">
<div class="row">
<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>
<div class="col-4 col-sm-12 low-height box border bg-light">
<div class="row justify-content-end align-content-end">
<div class="col-1 border small-box bg-success m-1"></div>
</div>
</div>
<div class="col-4 col-sm-12 low-height box border bg-light justify-content-center align-content-center">
<div class="row">
<div class="col-lg-12 text-center">
<h4>Title</h4>
</div>
</div>
</div>
</div>
</div>