Expand flexbox child into full new row wider than container - css

Question

I'm creating a portfolio section working with Bootstrap 4 and learning flexbox. Each portfolio item initially contains a thumbnail that expands/collapses with more details when clicked.
At full width, the items run in rows of 4 columns. Can I use flexbox to get the detailed description (pabout) to expand below the current row and run full width? i.e. On mobile, items will be in 1 column and clicking an item will expand the description below the item clicked. At larger widths, the description will expand (to make a new row) below the row at full width.
Looking for the CSS for the expanded row. I can manage the JS.
<section id="test" class="container">
<div class="flex-container">
<div class="pitem">
<div class="pcard">
<p>Title 1</p>
</div>
<div class="pabout">
Detailed description goes here
</div>
</div>
<div class="pitem">
<div class="pcard">
<p>Title 2</p>
</div>
<div class="pabout collapse">
Detailed description goes here
</div>
</div>
<div class="pitem">
<div class="pcard">
<p>Title 3</p>
</div>
<div class="pabout collapse">
Detailed description goes here
</div>
</div>
<div class="pitem">
<div class="pcard">
<p>Title 4</p>
</div>
<div class="pabout collapse">
Detailed description goes here
</div>
</div>
</div>
</section>
Update:
Here's some CSS/HTML I'm working with. I don't mind if either the description div expands to the full viewport width or the Bootstrap container bounds.
https://codepen.io/codecarson/pen/zEPXge

Answer 1

Changing last item's flex-grow :
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
//This change
&:last-child{
flex-grow: 5;
}
}
Seems to work as brute force method. Or are you searching for something more intelligent ?