Javascript 只要一个元素换行，其他元素也会换行

我有一个页面，其中有一部分内联块，我试图实现的是，如果它们合适，它们都在同一行上，但一旦其中一个换行，我希望它们都换行到新行上。我有一个持续javascript位置/宽度检查的想法，但我希望CSS或引导程序中有更干净的东西

编辑：澄清一点-
每个块的宽度是可变的，在页面加载后不会改变。
容器的宽度是可变的，在页面加载后可能会发生变化（调整浏览器窗口的大小/移动方向会发生变化）

下面是一个提琴示例，其中第一个容器是正确的预期行为，但底部容器我希望所有东西都包装起来：

---

在我看来，有两个straigtforward css选项

a） 使“窄容器”更窄-从500px减少到例如350或300

或

b） 您可以为底部容器创建一个单独的css类，并将它们设置为block，如果您希望它们一个接一个地排列在一起

有没有理由把窄的一个定为500？如果是这样，我会选择第二种选择。我包括一些片段

.wide容器{
宽度：700px；
边框：黑色实心；
}
.窄货柜{
宽度：500px；
边框：黑色实心；
}
.街区{
显示：内联块；
宽度：200px；
高度：100px；
}
伊布洛克先生{
显示：块；
宽度：200px；
高度：100px；
利润率：3px0px；
}
.一{
背景：红色；
}
.二{
背景：绿色；
}
.三{
背景：蓝色；
}

我想说，没有媒体查询或黑客攻击，这是不可能的。。。那么，你对媒体查询或黑客感兴趣吗？只需研究“响应式设计”，选项以相反的顺序发布-幸运的是，仅适用于固定的容器宽度。宽容器和窄容器试图在多个状态下显示同一容器。哦，好吧，我当时误解了这个问题。考虑Flex Box可能吗？

<div class="wide-container">
  <div class="block one"></div>
  <div class="block two"></div>
  <div class="block three"></div>
</div>
<br>
<div class="narrow-container">
  <div class="block one"></div>
  <div class="block two"></div>
  <div class="block three"></div>
</div>

.wide-container {
  width: 700px;
  border: black solid;
}
.narrow-container {
  width: 500px;
  border: black solid;
}

.block {
  display: inline-block;
  width: 200px;
  height: 100px;
}
.one {
  background: red;
}
.two {
  background: green;
}
.three {
  background: blue;
}