Display a flex element on a new row

Let's assume that you have the following layout:

html
<div class = 'Grid'>
    <div>Row 1</div>
    <div>Row 1</div>
    <div>Row 1</div>
    <div>Row 2</div>
</div>

If you want to display a flex element on a new row (last element on the example above):

CSS
.Grid{
    display: flex;
    flex-wrap: wrap;
}
.Grid div:nth-of-type(4){
    width: 100%;
}

Result:

 _______ _______ _______
|       |       |       |
| Row 1 | Row 1 | Row 1 |
|       |       |       |
|_______|_______|_______|_______
|                               |
|         Row 2                 |   
|                               |
|_______________________________|

More examples

Let's suppose the following layout:

html
<div class = 'Grid'>
    <div>Row 1</div>
    <div>Row 1</div>
    <div>Row 1</div>
    <div>Row 2</div>
    <div>Row 2</div>
</div>

Let's place the two lasts elements into a new row:

CSS
.Grid{
    display: flex;
    flex-wrap: wrap;
}
.Grid div:nth-of-type(4),
.Grid div:nth-of-type(5){
    width: 50%;
}

Result:

 _______ _______ _______
|       |       |       |
| Row 1 | Row 1 | Row 1 |
|       |       |       |
|_______|_______|_______|_______
|               |               |
| Row 2         | Row 2         |
|               |               |
|_______________|_______________|