Flexbox bug in Internet Explorer <= Edge - html

Question

My problem is regarding flexbox layout. Check the demo from modern browsers and Internet Explorer.
Code Snippet:
.features-section {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
-webkit-flex-flow: row wrap;
}
.features-section .custom-col-6 {
padding: 1em;
margin: 0;
align-self: center;
width: 50%;
box-sizing: border-box;
}
.features-section .not-for-mobile {
display: block;
}
.features-section .not-for-desktop {
display: none;
}
.features-section .feature-image {
height: 490px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.features-section .feature-image-1 {
background-image: url(https://images.unsplash.com/photo-1430806746135-4c9775bfea07?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=f98a2e705cc92fdba353e0d973176aff);
}
.features-section .feature-image-2 {
background-image: url(https://images.unsplash.com/photo-1430806746135-4c9775bfea07?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=f98a2e705cc92fdba353e0d973176aff);
}
.features-section .feature-image-3 {
background-image: url(https://images.unsplash.com/photo-1430806746135-4c9775bfea07?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=f98a2e705cc92fdba353e0d973176aff);
}
.features-section .feature-image-4 {
background-image: url(https://images.unsplash.com/photo-1430806746135-4c9775bfea07?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=f98a2e705cc92fdba353e0d973176aff);
}
.features-section .feature-item .item-header {
font-size: 0.857em;
text-transform: uppercase;
line-height: 2.8em;
color: black;
}
.features-section .feature-item .item-text {
color: #333;
line-height: 2.1em;
}
.features-section .feature-item i {
font-size: 3em;
}
.features-section .feature-style-1,
.features-section .feature-style-2 {
text-align: center;
}
.features-section .feature-style-1 p,
.features-section .feature-style-2 p {
padding: 0 60px;
}
.features-section .feature-style-3 {
text-align: left;
}
.features-section .feature-style-3 .icon-wrapper {
padding: 2px 20px 0 45px;
float: left;
}
.features-section .feature-style-3 .text-wrapper {
display: inline-block;
width: 80%;
padding: 0 35px 0 0;
}
.features-section .feature-style-4 {
text-align: right;
}
.features-section .feature-style-4 .icon-wrapper {
padding: 2px 45px 0 20px;
float: right;
}
.features-section .feature-style-4 .text-wrapper {
display: inline-block;
width: 80%;
padding: 0 0 0 35px;
}
<div class="features-section">
<div class="custom-col-6 feature-image feature-image-1"></div>
<div class="custom-col-6 feature-text">
<div class="feature-item feature-style-1">
<h4 class="item-header">multipurpose template</h4>
<p class="item-text">Would you like to pop in a CD and have a better quality of life, and even self improvement? There are three ways you can use music to accomplish this.</p>
</div>
</div>
<div class="custom-col-6 feature-image feature-image-2 not-for-desktop"></div>
<div class="custom-col-6 feature-text">
<div class="feature-item feature-style-2">
<i class="ion-ios-gear-outline"></i>
<h4 class="item-header">multipurpose template</h4>
<p class="item-text">Would you like to pop in a CD and have a better quality of life, and even self improvement? There are three ways you can use music to accomplish this.</p>
</div>
</div>
<div class="custom-col-6 feature-image feature-image-2 not-for-mobile"></div>
<div class="custom-col-6 feature-image feature-image-3"></div>
<div class="custom-col-6 feature-text">
<div class="feature-item feature-style-3">
<div class="icon-wrapper"><i class="ion-ios-gear-outline"></i>
</div>
<div class="text-wrapper">
<h4 class="item-header">multipurpose template</h4>
<p class="item-text">Would you like to pop in a CD and have a better quality of life, and even self improvement? There are three ways you can use music to accomplish this.</p>
</div>
</div>
</div>
CodePen
So, in IE all flex items are in one row, but I need every item to occupy half of the row.