sameBoxHeight Demo

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div id="left" class="col-sm-6 red">
            <div class="visible-xs">
                <b>Please resize window for sameBoxHeight effect</b>
            </div>
            Hello
            <br>Hello
            <br>Hello
        </div>
        <div id="right" class="col-sm-6 blue">Hello
            <br>
        </div>
    </div>
</div>

CSS

.red {
    background-color: red;
}
.blue {
    background-color: blue;
}

JavaScript

(function ($) {
    $.fn.sameBoxHeight = function (options) {
        var opts = $.extend({}, $.fn.sameBoxHeight.defaults, options);

        if ($(window).width() >= opts.
        break) {
            h1 = this.height();
            h2 = opts.box.height();
            if (h1 < h2) {
                this.height(h2);
            } else {
                opts.box.height(h1);
            }
        } else {
            this.css("height", "auto");
            opts.box.css("height", "auto");
        }

        if (opts.resize) {
            var x = this;
            $(window).resize(function () {
                x.sameBoxHeight({
                    box: opts.box,
                    resize: false
                });
            });
        }
        return this;
    };

    $.fn.sameBoxHeight.defaults = {
        break: 768,
        resize: true
    };
}(jQuery));

$(function () {
    $('#left').sameBoxHeight({
        box: $('#right')
    });
});