Issue converting container rows into columns for responsiveness-CodePudding

I am working on writing the html for the above image with responsiveness. Below is my code for the design so far

HTML:

    <div >
  <div
    
  >
    <div ></div>
    <div ></div>
  </div>
  <div
    
  >
    <div ></div>
  </div>
  <div
    
  >
    <div ><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.

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<div >
  <div >
    <div >
      <div >
        <div >Box-1
        </div>
      </div>
      <div >
        <div >Box-2
        </div>
      </div>
      <div >
        <div >Box-3
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

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 ...> 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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div >
    <div >
        <div >
            <div >
                <div ></div>
                <div ></div>
            </div>
        </div>
        <div >
            <div >
                <div ></div>
            </div>
        </div>
        <div >
            <div >
                <div >
                    <h4>Title</h4>
                </div>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

You can try wrapping your 3 main sections inside a row container, that way bootstrap will automatically handle the responsive part based on screen's width (also you can specify the numbers of cols each main part should take on each breakpoint you want, or just leave it auto, it's Up to you), of course, with this adjustment you need to remove the "row" classes for each main section since the main "row" wrapper can only have "cols" as direct child elements if I'm not mistaken. For the child elements or "main sections" you can use d-flex class and flex utilities to position the elements inside them the way you want.