Flexbox Shrink Images within Div for Column Stacked images - html

Question

I would like to have one image on the left and two on the right stacked on top of one another. As the footprint shrinks, horizontally, I would like the images to become small too, maintaining their aspect ratios. When I currently do it the images maintain their same size and are pushed off the left side of the page.
I am using bootstrap 3.* right now. But I would be curious to know how to do it with flexbox.
codepen
* {
box-sizing: border-box;
}
.content {
background-color: rgba(0, 0, 0, 0.3);
padding: 10px;
}
.row {
display: flex;
flex-flow: column wrap-reverse;
justify-content: center;
align-items: center;
max-width: 600px;
height: 40px;
background-color: rgba(0, 0, 0, .2);
}
.cell {
text-align: center;
display: flex;
align-items: center;
min-height: 50%;
padding-top: 5px;
padding-bottom: 5px;
}
.ordered3 {
order: 3;
flex: 2;
padding-right: 10px;
border-right: rgba(0, 0, 0, 0.3) solid 3px;
}
.ordered2 {
order: 2;
flex: 1;
}
.ordered1 {
order: 1;
flex: 1;
}
img {
margin: auto;
width: 100%;
max-width: 300px;
max-height: 100%
}
<div class="content">
<div class="row">
<div class="cell ordered3">
<img src="http://lorempixel.com/output/nature-q-c-260-44-8.jpg" />
</div>
<div class="cell ordered2">
<img src="http://lorempixel.com/output/city-q-c-260-24-3.jpg" />
</div>
<div class="cell ordered1">
<img src="http://lorempixel.com/output/abstract-q-c-310-37-1.jpg" />
</div>
</div>
</div>

Answer 1

Check my codeopen. If it's not what you want, please clarify your issue.
* {
box-sizing: border-box;
}
.content {
background-color: #f9f9f9;
border: 1px solid #ececec;
padding: 10px;
}
.row {
display: flex;
align-items: center;
}
.cell {
padding-top: 5px;
padding-bottom: 5px;
}
img {
width: 100%;
display: block;
max-width: 300px;
}
<div class="content">
<div class="row">
<div class="cell">
<img src="http://lorempixel.com/output/nature-q-c-260-44-8.jpg"/>
</div>
<div class="cell">
<img src="http://lorempixel.com/output/city-q-c-260-24-3.jpg"/>
<img src="http://lorempixel.com/output/abstract-q-c-310-37-1.jpg"/>
</div>
<div class="cell">
<img src="http://lorempixel.com/output/nature-q-c-260-44-8.jpg"/>
</div>
<div class="cell">
<img src="http://lorempixel.com/output/city-q-c-260-24-3.jpg"/>
<img src="http://lorempixel.com/output/abstract-q-c-310-37-1.jpg"/>
</div>
</div>
</div>