Responsive - Equal height test

An early test of equal height column styles.

HTML

<link rel="stylesheet" href="http://responsivebp.com/assets/css/responsive.css">
<!DOCTYPE html>
<!--
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.6
Version: 4.5.4
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: [email protected]
Follow: www.twitter.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->

<head>
    <meta charset="utf-8" />
    <title>Metronic | Dashboard</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />

    <meta content="" name="description" />
    <meta content="" name="author" />
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
    <!-- END GLOBAL MANDATORY STYLES -->
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <link...

CSS

.equal-height {
    display: table;
    width:100%;
}
.equal-height >[class*="col-"] {
    vertical-align: top;
    float:none;
}
.equal-height > .col-xxs-12 {
    display: table-caption;
}
@media print and (min-width: 536px), screen and (min-width: 37.5em) {
    .equal-height >[class*="col-xs"] {
        display: table-cell;
    }
    .equal-height > .col-xs-12 {
        display: table-caption;
    }
}
@media print and (min-width: 537px), screen and (min-width: 48em) {
    .equal-height >[class*="col-s"] {
        display: table-cell;
    }
    .equal-height > .col-s-12 {
        display: table-caption;
    }
}
@media (min-width: 62em) {
    .equal-height >[class*="col-m"] {
        display: table-cell;
    }
    .equal-height > .col-m-12 {
        display: table-caption;
    }
}
@media (min-width: 75em) {
    .equal-height >[class*="col-l"] {
        display: table-cell;
    }
    .equal-height > .col-l-12 {
        display: table-caption;
    }
}