CSS3 Flex and Bootstrap - html

Question

Using this example, http://www.bootply.com/126437/, I am trying to make my Bootstrap layout columns equal height, as well as still be fully responsive.
I am trying to get my head around how the CSS is working in the example but still haven't cracked it. With my own SASS, the layout looks fine on a large screen, but until I add "auto" to my flex, the columns aren't responsive on a small screen.
Any help would be appreciate to get this working on all size screens!
HAML/Bootstrap:
%section.row.row-flex.row-flex-wrap
.col-xs-12.col-sm-12.col-md-8.col-lg-8.column-flex
.flex-col
= field('block_2')
.col-xs-12.col-sm-12.col-md-4.col-lg-4.column-flex.one-column
.row
.col-xs-12.col-sm-6.col-md-12.col-lg-12
.events-image-block
= field('block_3')
.col-xs-12.col-sm-6.col-md-12.col-lg-12
= field('block_4')
%section.row.row-flex.row-flex-wrap
.col-xs-12.col-sm-6.col-md-4.col-lg-4.column-flex.one-column
.flex-col
= field('block_5')
.col-xs-12.col-sm-6.col-md-4.col-lg-4.column-flex.one-column
.flex-col
= field('block_6')
.col-xs-12.col-sm-12.col-md-4.col-lg-4.column-flex.one-column
.flex-col
= field('block_7')
SASS:
section.row-flex {
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: -moz-box;
display: flex;
webkit-flex: 1;
-ms-flex: 1;
flex: 1;
&.row-flex-wrap {
-webkit-flex-flow: row wrap;
align-content: flex-start;
webkit-flex: 0;
-ms-flex: 0;
flex: 0;
}
& > .column-flex {
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: -moz-box;
display: flex;
margin: -.2px;
&.one-column {
webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
}
.flex-col,
.flex-col > div {
flex-flow: column nowrap;
display: -webkit-flex;
display: flex;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flex-grow {
display: flex;
-webkit-flex: 2;
-ms-flex: 2;
flex: 2;
}
}