Responsivity in HTML pages with column-like structures

Question

If you use BS3 but are willing to use flex aside, you can consider grid instead inside a mediaquerie and a custom class :

Your comment I react to:

Thanks G-Cyrillus. Is it possible to do that with Flex and Bs3? This is a large website which is built entirely with BootStrap3, and upgrading to Bs4 is currently not an option.

possible example with BS3, using a custom class inside a mediaquerie:

/*see us,  demo purpose */

.row div {
  box-shadow: 0 0 0 1px
}

/* custom class for the breakpoint where  rows are drawn into columns with matching rows */
@media screen and (max-width: 992px) and (min-width:768px) {
   :before,
   :after {
    grid-row: -1
  }
  .grid-md-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row dense;
  }
  .grid-md-2 [class^="col"] {
    width: 100%;
    grid-column: 1;
  }
  /*.grid-md-2 [class^="col"]:nth-child(3)~[class^="col"]*/
  /* update for a repeating pattern */
  .grid-md-2 [class^="col"]:nth-child(6n -2),
  .grid-md-2 [class^="col"]:nth-child(6n -1),
  .grid-md-2 [class^="col"]:nth-child(6n) {
    grid-column: 2;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row grid-md-2">
    <div class="col-sm-6 col-md-4 col-xs-12">
      First
    </div>
    <div class="col-sm-6 col-md-4 col-xs-12">
      Second
    </div>
    <div class="col-sm-6 col-md-4 col-xs-12">
      Third 
    </div>
    <div class="col-sm-6 col-md-4 col-xs-12">
      First First First
      <br><br> First First 
    </div>
    <div class="col-sm-6 col-md-4 col-xs-12">
       Second<br>Second
    </div>
    <div class="col-sm-6 col-md-4 col-xs-12">
      Third
    </div>
  </div>
</div>

Leave a Comment Cancel Reply