boostrap 4 Equal heights not working - html

Question

What is the way of making div's have equal heights within the row?
it says everywhere that bootstrap4 is flex by default, but it doesn't work for some unknown reason
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="content" >
<div class="sub_title"> HISTORY </div>
<div class="desc"> Sometext </div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-md-6 col-lg">
<div class="content">
<div class="sub_title">
<div class="number"> 2012 </div>
</div>
<div class="desc"> some other text </div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg ">
<div class="content">
<div class="sub_title">
<div class="number"> 2014 </div>
</div>
<div class="desc"> More text </div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg ">
<div class="content">
<div class="sub_title">
<div class="number"> 2017 </div>
</div>
<div class="desc"> Text here too </div>
</div>
</div>
</div>
the scss
.content {
#extend .effect8;
background: white;
margin: 10px;
padding: 10px 30px 20px;
span {
display: block;
p {
font-weight: bold;
}
}
}
.sub_title {
font-size: 1.5em;
font-weight: 700;
text-transform: uppercase;
display: block;
color: $blue;
margin: 10px auto;
}
this is the scss for the content and the sub_title class

Answer 1

If you want .content to be full height on each .col, the content should have height:100%;. I don't know the CSS def of .effect8.
.content {
background: white;
margin: 10px;
padding: 10px 30px 20px;
height: 100%;
span {
display: block;
p {
font-weight: bold;
}
}
}
https://www.codeply.com/go/B4g6TlSDkA

Answer 2

Actually it depend of browser, e.g In Safari it may not work, and also in Internet Explorer may have unwanted behaviors.
If you're really want equal and avoid cross browser issue try JS solution e.g http://brm.io/jquery-match-height/