CSS responsive: shrink some divs first, then others, etc

Question

When the screen width reduces, I'd like set an order of preference of which divs get shrunk first, second, third etc.?

E.g. I have "buildings" in a row (table or flex box), with "gaps" between each pair, and an auto margin on the far left and far right.

As screen width shrinks: 1. First, reduce margin width down to 0. 2. Then, reduce "gap" width from 125px down to 30px. 3. Only then, start reducing "building" width below the prefered width (125px)

I thought setting min-width:125px and max-width:30px would do this, but nope.

body {
margin: 0;
padding: 0;
}

.holder {
	display: table;
	background-color: pink;
	margin: auto;
}
.top {
	display: table-row;
	width: 100%;
	background-color: blue;
}
.bottom {
	display: table-row;
	background-color: rgb(100,100,100);
}
.top_buildings {
	display: table;
	width: 100%;
}
.building {
	display: table-cell;
	background-color: rgb(100,100,100);
	width: 125px;
	height: 30px;
}
.gap {
	display: table-cell;
	width: 125px;
	min-width: 30px;
	background-color: rgb(200,200,200);
}

<div class="holder">
  <div class="top">
    <div class="top_buildings">
      <div class="building">Building A</div>
      <div class="gap"></div>
      <div class="building">Building B</div>
      <div class="gap"></div>
      <div class="building">Building C</div>
      <div class="gap"></div>
      <div class="building">Building D</div>
      <div class="gap"></div>
      <div class="building">Building E</div>
      <div class="gap"></div>
      <div class="building">Building F</div>
    </div>
  </div>
  <div class="bottom">
    bottom
  </div>
</div>
<br>
<div class="holder">
  <div class="top">
    <div class="top_buildings">
      <div class="building">Building A</div>
      <div class="gap"></div>
      <div class="building">Building B</div>
      <div class="gap"></div>
      <div class="building">Building C</div>
    </div>
  </div>
  <div class="bottom">
    bottom
  </div>
</div>
<br>
<div class="holder">
  <div class="top">
    <div class="top_buildings">
      <div class="building">Building A</div>
      <div class="gap"></div>
      <div class="building">Building B</div>
    </div>
  </div>
  <div class="bottom">
    bottom
  </div>
</div>

Answer 1

Responsive design is achieved using CSS3 media queries with max-width or min-width selector.

This way you can set rules for shrink precedence, by applying different styles to classes, depending on screen size.