JS
equalheight = function(container){
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$(container).each(function() {
$el = $(this);
$($el).height('auto')
topPostion = $el.position().top;
if (currentRowStart != topPostion) {
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
}
$(window).load(function() {
equalheight('.blog-main article');
});
$(window).resize(function(){
equalheight('.blog-main article');
});
Html
<div class="blog-main">
<article class="col-md-4 col-sm-6 col-xs-6">
------------
-----------
-------------
-----------
</article>
<article class="col-md-4 col-sm-6 col-xs-6">
------------
-----------
</article>
<article class="col-md-4 col-sm-6 col-xs-6">
------------
-----------
-------------
-----------
</article>
<article class="col-md-4 col-sm-6 col-xs-6">
------------
-----------
</article>
<article class="col-md-4 col-sm-6 col-xs-6">
------------
-----------
-------------
-----------
</article>
<article class="col-md-4 col-sm-6 col-xs-6">
------------
-----------
</article>
</div>
In this jQuery find the highest height of article section of each row and assign the height to other article section on relevant row