How to move 3rd column div to bottom as a row in Flex Column

Question

I wanted to show the 3rd column as a Row below the first 2 columns as per image. what is the option?

<div class="d-flex">
<section class="flex-even">A</section>
<section class="flex-even">B</section>
<section class="flex-even">C</section>
</div>
 section {
   border:solid 1px red;
 }
.flex-even { flex:1;}

https://jsfiddle.net/anadmin7776/yanouepb/3/

Answer 1

Set wrapping and make the third section 100% wide.

 section {
   border:solid 1px red;
 }
.flex-even { flex:1;}

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

section:nth-child(3) {
flex:0 0 100%;
}

<div class="d-flex">
  <section class="flex-even">A</section>
  <section class="flex-even">B</section>
  <section class="flex-even">C</section>
</div>

Answer 2

Since you use bootstrap, mind that it has built-in class, you may use them to avoid writing extra CSS , custom class can be indeed used.

find them here : https://getbootstrap.com/docs/4.5/layout/grid/

example from your code

section {
  border: solid 1px red;
}
.flex-even {
/*rules here  if it has any purpose else than flex-grow:1 = class: flex-grow-1 or col */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-wrap m-2">
  <section class="flex-even col">A</section>
  <section class="flex-even col">B</section>
  <section class="flex-even col-12">C</section>
</div>
<ol>
  <li><code>col</code> class will evnly stretch flex-items</li>
  <li><code>col-12</code> class will use the entire row for that flex item</li>
  <li><code>m-X</code> class sets a margin</li>
</ol>

another example with margins, paddings and a custom class to show gutters all around cells https://jsfiddle.net/4y79nsdj/