Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
    <div class="row flex-md" id="row-quadrati">
    <div id="quadr-col-1" class="col-md-6">
        <div id="flex-row-1">
            <div id="pagi-focus">
                <h2>1</h2>
            </div>
            <div id="non-porre-limiti">

                <h2>2</h2>
                <h2>2</h2>
                <h2>2</h2>
                <h2>2</h2>
                <h2>2</h2>
                <h2>2</h2>
                <h2>2</h2>
                <h2>2</h2>
                <h2>2</h2>
                
                
            </div>
        </div>
        <div id="pagiletter">
            <h2>3</h2>
            <p>short</p>
        </div>

    </div>
    <div id="quadr-col-2" class="col-md-6">

        <div id="pagi-network">
            <h2>4</h2>
        </div>
        <div id="love-pagi-outer">
            <div id="we-love-pagi">5</div>
            <div id="vuoto">6</div>
        </div>

    </div>
</div>

</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}


div#quadr-col-1 {
    display: flex;
    flex-direction: column;
    padding: 0;
}

@media(min-width:992px) { /* medio e grande */

    .flex-md {
        display: flex;
    }

}
#pagiletter{
    background-color:#cccccc;
}
#pagi-focus{
    background-color:#1DAFAF;
    color:white;
    /* flex-grow: 1; */
    flex: 1;
    /* height: 100%; */
    /* display: inline-block; */
    width: 1;
    /* text-align: center; */
    padding: 10px;
}
#pagi-network{
    color:white;
    background-color:#96263C;
    /* height:100%; */
    /* display: inline-block; */
    /* float: left; */
    /* width: 50%; */
    padding: 10px;
    flex: 1;
}
div#non-porre-limiti {
    background-color: gray;
    /* display: inline-block; */
    padding: 10px;
    width: 1;
    /* flex-grow: 1; */
    flex: 1;
}

#we-love-pagi {
    background-color: #BA9AC9;
    flex: 1;
    padding: 10px;
}
div#quadr-col-2 {
    background-color: purple;
    padding: 0;
    /* height: 582px; */
    display: flex;
}

div#love-pagi-outer {
    /* float: left; */
    /* height: 100%; */
    /* display: inline-block; */
    /* width: 50%; */
    flex: 1;
    display: flex;
    flex-direction: column;
    /* padding: 10px; */
}


#vuoto {
    background-color: #1BAFAF;
    flex: 1;
    padding: 10px;
}


div#flex-row-1 {
    display: flex;
    /* height: 50%; */
    flex: 1;
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */
function computeMaxHeight(els) {
    var ht = 0;
    els.forEach(function (el) {
        var elht = el.height();
        if (elht > ht) {
            ht = elht;
        }
    });
    return ht;
}

function setMinMeight(els) {
    var maxht = computeMaxHeight(els);
    //console.log("here resize. maxht = " + maxht);

    els.forEach(function (el) {
        el.css('min-height', maxht);
    });

}

$(document).ready(function () {

    var els = [$("#non-porre-limiti"), $("#we-love-pagi"), $("#vuoto"), $("#pagiletter"), $("#pagi-focus")];

    $(window).on('resize', function () {
        setMinMeight(els);

    });

    setMinMeight(els);

});