How to combine responsive layout and equal height columns in CSS?

Question

I am new to CSS and I am currently struggling to combine a responsive layout that looks different according to the screen it is displayed on and equal heights in columns. I seem to have managed to do them separately (1. use a responsive layout when defining a fixed height for the columns - but that becomes messy because the text can overflow or 2.draw equal-height columns with flex but without media queries. I have 3 columns and I aim for:

• for large devices: a line 1x3
• for medium devices: a line 1x2 and a line 1x1 (in the first line, the 2 columns should have width 50% each, while in the second line the 3rd columns should have width 100%.)
• for small devices: 3x1 (3 lines, each column should have width 100%)

I have 2 main problems:

• the height of the background colour of the columns is not equal in all three of them - although the border is
• the columns do not cover more than one lines, even for the small devices case.

Here's my code in jsfiddle: https://jsfiddle.net/chrissa3/967nzmus/#&togetherjs=N0boOJaHPF

And attached here:

    *{
       box-sizing: border-box;
       font-family: "Book Antiqua";
     }
    
     h1 {
       margin-bottom: 15px;
       text-align: center;
     }
    
     .row {
       width: 100%;
       display: flex;
       overflow: auto;
     }
    
     .box {
       flex: 1;
       background-color: #AAAAAA;
       color: white;
       text-align: justify;
       padding: 10px;
       margin-left: 20px;
       margin-right: 20px;
     }
    
     h2 {
       position: relative;
       background-color: #222222;
       color: white;
       border: 1px solid white;
       text-align: center;
       width: 40%;
       margin-inline-start: 60%;
     }
    
     /********** Large devices only **********/
    
     @media only screen and (min-width: 1200px) {
       .col-lg-4 {
         float: left;
         border: 1px solid black;
         width: 33.33%;
       }
     }
    
     /********** Medium devices only **********/
    
     @media only screen and (min-width: 992px) and (max-width: 1199px) {
       .col-md-6,
       .col-md-12 {
         float: left;
         border: 1px solid green;
       }
       .col-md-6 {
         width: 50%;
       }
       .col-md-12 {
         width: 100%;
       }
     }
     /********** Small devices only **********/
     @media only screen and (max-width: 991px) {
       .col-sm-12 {
         float: left;
         border: 1px solid red;
         width: 100%;
       }
     }

    <h1>Responsive layout test</h1>
      <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-12">
          <div class="box">
            <h2>I am number 1!</h2>
            <p>
              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12">
          <div class="box">
            <h2>I am number 2!</h2>
            <p>
              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada
              fames ac turpis egestas.
            </p>
          </div>
        </div>
        <div class="col-lg-4 col-md-12 col-sm-12">
          <div class="box">
            <h2>I am number 3!</h2>
            <p>
              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada
              fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
            </p>
          </div>
        </div>
      </div>

Thank you very much in advance for all your help!

Answer 1

Okay, first of all you mixed up "float" and "flex".

When you make a Flex layout, there is no use to make anything float.

so then next to realize is:

display:flex;

works for the exactly following children and not any deeper. that´s why your outer border has the same height (you used it on the "col-xs-12" for example. What you actually want to be the same height is you "box" --> here I added an height: 100%; which works with flexbox in this case.

On the html part I added a "column" class to all those columns, here you should go ahead and define styles which always count (padding, border etc.)

With those Styles applied you already have your wished heights and stuff. Now you want it to break responsive, therefore you made styles go 50%/50%/100% which is ok already. As you already observed the result is: 25%/25%/50%.

This simply is how flex works by default: It puts all children in one line and calculating their widths down to a total of 100% (devided by 2 in the top example)

To make the layout you desire use:

flex-wrap: wrap;

this makes your layout look the desired way responsive.

here´s the updated fiddle: https://jsfiddle.net/smynzw8t/