How did you make responsive websites before without bootstrap and ready-made grids?

Question

css

The question may be strange, but still.
How did responsive sites do before without bootstrap and ready-made grids like below? Having only media queries.
What is the layout of the site without ready-made grids and even your own, but only on% and media queries?
I made my 12 column grid:

.container .cols.col-1 {width: 8.33333333333%;}
.container .cols.col-2 {width: 16.666666667%;}
.container .cols.col-3 {width: 25%;}
.container .cols.col-4 {width: 33.333333333%;}
.container .cols.col-5 {width: 41.666666667%;}
.container .cols.col-6 {width: 50%;}
.container .cols.col-7 {width: 58.333333333%;}
.container .cols.col-8 {width: 66.666666667%;}
.container .cols.col-9 {width: 75%;}
.container .cols.col-10 {width: 83.333333333%;}
.container .cols.col-11 {width: 91.666666667%;}
.container .cols.col-12 {width: 100%;}

Answer 1

I still adapt old sites (long ago made up) with the most common media queries.
example (fictitious :) ):

.menu {
   width: 500px;
  @media (max-width: $breakpoint) {
      width: 100px;
  }
}
.menu2 {
   width: 550px;
  @media (max-width: $breakpoint) {
      width: 150px;
  }
}

/* ... другие блоки верстки аналогично */

I write all the conditions separately in each block, it’s more convenient.
At the end I pass everything through combine-mq to combine the same media queries

Answer 2

Responsive Web Design
Ethan Marcotte