Bootstrap or W3.css - Put columns in excess in a new row

Question

I am using W3.CSS as CSS framework. It's simple and straightforward. Now I am having some trouble presenting a set of cards in a responsive grid.

I want the cards to be in rows of three when there is enough space, or one per row when the screen is small. The problem is that, depending on the height of the card, the new cards are added below the last card, and not in a new row.

You can run the snippet below. I would like the green card to go to a new row.

.w3-col {
  margin-bottom: 16px;
}

.card {
  background-color: red;
  text-align: center;
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>

<div class="w3-container">
  <div class="w3-row-padding">
    <div class="w3-col s4">
      <div class="card" style="height: 100px"></div>
    </div>
    <div class="w3-col s4">
      <div class="card" style="height: 120px; background-color: black"></div>
    </div>
    <div class="w3-col s4">
      <div class="card" style="height: 100px"></div>
    </div>
    <div class="w3-col s4">
      <div class="card" style="height: 100px; background-color: green"></div>
    </div>
    <div class="w3-col s4">
      <div class="card" style="height: 100px"></div>
    </div>
    <div class="w3-col s4">
      <div class="card" style="height: 100px"></div>
    </div>
    <div class="w3-col s4">
      <div class="card" style="height: 100px"></div>
    </div>
  </div>
</div>

The problem is identical in Bootstrap, if you use row and col-xs-4 instead of w3-row and w3-col s4. You can see it here https://jsfiddle.net/qLcs84f2/