Some of the previous answers explain how to make the divs the same height, but the problem is that when the width is too narrow the divs won't stack, therefore you can implement their answers with one extra part. For each one you can use the CSS name given here in addition to the row class that you use, so the div should look like this if you always want the divs to be next to each other:
<div class="row row-eq-height-xs">Your Content Here</div> For all screens:
.row-eq-height-xs { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: row; } For when you want to use sm:
.row-eq-height-sm { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; } @media (min-width:768px) { .row-eq-height-sm { flex-direction: row; } } For when you want to md:
.row-eq-height-md { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; } @media (min-width:992px) { .row-eq-height-md { flex-direction: row; } } For when you want to use lg:
.row-eq-height-lg { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; } @media (min-width:1200px) { .row-eq-height-md { flex-direction: row; } } EDIT Based on a comment, there is indeed a simpler solution, but you need to make sure to give column info from the largest desired width for all sizes down to xs (e.g. <div class="col-md-3 col-sm-4 col-xs-12">:
.row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: row; flex-wrap: wrap; }