Flexbox - Move a certain column from a row to the next row

I am trying to create the following structure:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.rowblock {
 display: flex;
 padding: 0.5rem;
 width: 100%;
 flex-direction: row;
}
.col {
 height: 50px;
 border: 1px solid #ccc;
}

<!-- language: lang-html -->

<div class="rowblock">
 <div class="col">10% Width</div>
 <div class="col">80% Width</div>
 <div class="col">100% on Next Row</div>
 <div class="col">10%</div>
</div>

<!-- end snippet -->

I am trying to move the 3rd column to the next row to occupy the full width. I tried using flex grow but it did not work. Please suggest an approach.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.rowblock {
  display: flex;
  padding: 0.5rem;
  width: 100%;
  flex-wrap: wrap;
}

.col {
  height: 50px;
  border: 1px solid #ccc;
  flex-grow: 1;
}

.col:nth-child(1) {
  order: 1;
  flex-basis: calc(10% - 2px);
}

.col:nth-child(2) {
  order: 2;
  flex-basis: calc(80% - 2px);
}

.col:nth-child(3) {
  order: 4;
  flex-basis: calc(100% - 2px);
}

.col:nth-child(4) {
  order: 3;
  flex-basis: calc(10% - 2px);
}

<!-- language: lang-html -->

<div class="rowblock">
 <div class="col">10% Width</div>
 <div class="col">80% Width</div>
 <div class="col">100% on Next Row</div>
 <div class="col">10%</div>
</div>

<!-- end snippet -->

In the modified code, I added the flex-wrap: wrap; property to the .rowblock class to allow the columns to wrap onto the next line when necessary.

For the columns, I used the flex-basis property to specify the initial width as a percentage. The first column has a width of 10%, the second column has 80%, the third column has 100% (which forces it onto the next row), and the fourth column has 10%.

With these modifications, you should achieve the desired structure with the specified column widths.

UPDATED:

I've updated the code with the order property as well as subtracting 2px in the flex-basis property to make up for the px's added by the col border.

Try this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.rowblock {
  display: flex;
  flex-wrap: wrap;
}

.col {
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid black;
  flex-grow: 1;
}

.col:nth-child(1) {
  order: 1;
}

.col:nth-child(2) {
  order: 2;
}

.col:nth-child(3) {
  flex-basis: 100%;
  width: 100%;
  order: 4;
}

.col:nth-child(4) {
  flex-basis: 10%;
  order: 3;
}

<!-- language: lang-html -->

<div class="rowblock">
 <div class="col">10% Width</div>
 <div class="col">80% Width</div>
 <div class="col">100% on Next Row</div>
 <div class="col">10%</div>
</div>

<!-- end snippet -->

It enables flex wrapping, moves the third column to the end of the row using the order property*, and gives the third column a width of 100%.

* The elements are only moved in layout; their order in the DOM is unchanged.