Maintain column width in row set as "display: table"

I have a row which takes up 25% of my screen height. It is set as display:table. The columns within it are all 33.333% wide and set as display:table-cell. Now, it works fine when there are 3 columns, they take up equal widths and are 3 per row. But if I add a fourth column, the fourth column is not displayed 33.333% wide, neither does it drop down to the second row and center itself. Is it possible to do at all?

I want the extra column to be 33.333% wide too, and positioned in the center, on a row below the 1st row.

.row-flex {
  display: table;
  width: 100%;
  height: 25%;
  margin 0 auto;
}
.one-third-flex.column {
  width: 33.3333%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  float: none;
}

<div class="row row-flex buttons-bottom row-one-half text-body">
  <div class="one-third-flex column" style="background-color:red">&nbsp;</div>
  <div class="one-third-flex column" style="background-color:green">&nbsp;</div>
  <div class="one-third-flex column" style="background-color:yellow">&nbsp;</div>
  <div class="one-third-flex column" style="background-color:pink">&nbsp;</div>
</div>