Assign divs the same height (responsive)

Question

I have several divs, that should have the same height , if the screen size is above a certain width.

I thought its a good idea to use a class .sameheight as selector to create a "global working function". Next I would assign another class, to pair the divs, that should have the same height, like so:

.sameheight-01
.sameheight-01
.sameheight-02
.sameheight-02  
.sameheight-02

I have several issues, that prevent me from writing my own script, as I have not enough skills in javascript/jQuery:

How can I make it a responsive function, not just set the height once after loading (using window.resize)?

How can I target .sameheight and search for other classes, without writing the same line multiple times (.hasClass(sameheight-01).hasClass(sameheight-02), etc.)?

How can I make this scalable? (Imagen I have twenty groups with ten different media queries)

I have created a JS Fiddle Demo to illustrate my problem.

Answer 1

How far back do you have to support? Because this could be solved using display:flex;

.row-sameheight {
   display: flex;
   display: -webkit-flex;
   display: -moz-box;
   width: 100%;
}

Here's a JS Fiddle

Answer 2

this you could achieve using CSS itself

@media (min-width:500px){
    .sameheight {
        min-height:100px;
    }
}

or

if u want to do through js/jq, refer the modification of fiddle code http://jsfiddle.net/qj3ntsjs/11/ or http://jsfiddle.net/qj3ntsjs/17/