Assign divs to the same height (responsive)

Question

I have several divs that should have the same heightif the screen size exceeds a certain width.

I thought it would be nice to use the class .sameheightas a selector to create a "global working function". Then I would assign another class to join divs that should be the same height, for example:

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

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

How can I make this a responsive function and 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 it scalable? (Imagen I have twenty groups with ten different media queries)

I created a JS Fiddle Demo to illustrate my problem.

Answer 1

How far back should you support? Because it can be solved with display: flex;

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

Here is js feed

Answer 2

this can be achieved using CSS itself

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

or

u js/jq, http://jsfiddle.net/qj3ntsjs/11/ http://jsfiddle.net/qj3ntsjs/17/