如何为flexbox，row，no-wrap添加换行符？

Question

当我调整浏览器窗口的大小时，我希望更改列数，而使用flex-wrap: no-wrap;框可以灵活更改。

所以我认为如果我在divs之后添加休息并使用@media禁用/能够使用CSS的一些休息时间，这可能是解决方案。看起来在flex-wrap: no-wrap;处于活动状态时添加换行符是不可能的。

我是一个新手，我想学习最好的CSS，因此，我正在尝试在不同情况下获得响应式结构。

我尝试过<br>标签，space-white: pre;和preline。我还尝试将其他父元素设置为display: inline-block;。但他们不适合我。如果可能的话，我想只用html和CSS来做。但这不是强制性限制。

我的HTML和CSS：

* {
  margin: 0;
  padding: 0;
}

body{
  margin-left: 15px;
  margin-right: 15px;
}

.car{
  display: flex;
  max-width: 500px;
  min-width: 200px;
  height: 50px;
  border: 1px solid grey;
  margin: 5px 20px;
}

.carParent{
  display: flex;
  flex-direction: row;
  width: 1300px;
  border: 1px solid orange;
}

  <body>

<div class="carParent">
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
  <div class="car"><h3>SOME TEXT AND IMAGE</h3></div>
</div>

  </body>