Flexbox grid misaligned in IE10/11 - css

Question

I have a 2x2 grid next to one big image that I need to line up. (here's a codepen) I used a combination of Bootstrap 3.3.7 and Flexbox and it looks great in everything BUT IE (go figure). I'm just beating my head against a wall trying to fix this.
I've got everything for the 2x2 grid positioned in a row like so.
<div class="row || flex-row">
<div class="col-xs-12 || col-md-6 || core-values-left">
<div>
<img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/corevaluesmain-1.jpg">
</div>
</div>
<div class="col-xs-12 || col-md-6 || core-values-right">
<div class="row">
<div class="col-xs-12 || col-md-6 || core-values-section">
<div class="core-values-img">
<img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/coretopleft.jpg">
<h4 class="core-values-heading">We Scout</h4>
<div class="core-hover">
<h5>We are a talent scout and agent for the grocery industry</h5>
<div>
Learn more
</div>
</div>
</div>
</div>
<div class="col-xs-12 || col-md-6 || core-values-section">
<div class="core-values-img">
<img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/coretopright-1.jpg">
<h4 class="core-values-heading">We Discover</h4>
<div class="core-hover">
<h5>We seek out new CPG opportunities and innovations</h5>
Learn More
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 || col-md-6 || core-values-section">
<div class="core-values-img">
<img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/corebottomleft.jpg">
<h4 class="core-values-heading">We Grow</h4>
<div class="core-hover">
<h5>We expand your brand’s horizons and elevate your success</h5>
Learn more
</div>
</div>
</div>
<div class="col-xs-12 || col-md-6 || core-values-section">
<div class="core-values-img">
<img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/corebottomright.jpg">
<h4 class="core-values-heading">We Champion</h4>
<div class="core-hover">
<h5>We value our client relationships and always go the extra mile</h5>
Learn more
</div>
</div>
</div>
</div>
</div>
</div>
Then I applied this css to the row and columns to line it up with flex. Works like a charm....except in IE
.flex-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.flex-row > [class*='col-'] {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
Things I've tried:
Adding min-height to the columns
Wrapping the rows in another div to
make them non-flex containers
Explicitly setting flex: 1 1 0% on the
rows and the columns
Rubbing a magic lamp and summoning a genie to
fix my problem
Does anyone has a clue what might be happening??? I hate IE so much.

Answer 1

First you have IE, which does everything it can to prevent coding from being fun or easy...
Then you have the many flexbox-related bugs in IE10 and IE11...
Add to that the multiple bugs related to flex-direction: column...
Then finally throw images into flex items (an entirely different set of challenges and inconsistencies)...
And you're pretty much guaranteed to find trouble.
My suggestion would be to switch the flex container from column to row. This should make your layout easier to handle by IE browsers.
Try these adjustments:
.flex-row > [class*='col-'] {
display: flex;
/* flex-direction: column; */
flex-direction: row; /* new */
flex-wrap: wrap; /* new */
align-content: space-between; /* new */
}
.core-values-left > div {
flex: 1; /* new */
}
revised codepen