Responsive equal height columns in rows with CSS3/HTML5 Only

Question

I would like to create a responsive table-layout with the use of the div, to be displayed for mobile devices only, where the elements has equal height for each rows using only CSS/CSS3 and not JavaScript, nor jQuery or plugin.

I found a working example, that uses JS: here is the CODEPEN live example.

I've made a research, but i did not find any working example that make use only of pure CSS/CSS3/HTML5 (flexbox for example).

The best is to have only floating divs, and no hack CSS code: the layout should have different column number, as per different device size, working responsive like the screenshots below:

Mobile Layout

Tablet Layout

Desktop Layout

Answer 1

A solution with flexboxes and media queries: http://jsfiddle.net/szxmw7ko/4/

#container{
  display: flex;

  align-items: stretch;
  flex-wrap: wrap;
} 

   
@media (max-width: 480px) {
    #container div {
        max-width: 98%;
    }
}
@media (min-width: 480px) and (max-width: 1080px) {
    #container div {
        max-width: 48%;
    }
}
@media (min-width: 1080px) {
    #container div {
        max-width: 23%;
    }
}

align-items: stretch tells to the flex items to fill the avalaible space along the cross axis. This is what allows to have equals height for all items.

flex-wrap: wrap gives the possibility to make a multiline flex flow. Otherwise, all items are jailed into one line.

max-width: XX% by default a block element will fill all avalaible space. Even if items are child of a flex layout, because of the flex-wrap rule which lifts the constraint of piling all the items on one row, they will stretch over the entire width of the container. So setting a maximum width, which will necessarily raised, gives the control of how many items you want on a row.

@media (max-width: XX%) finally, you have just to adapt the width of an item to define how many columns you want depending on the size of the viewport.

Flexboxes resources:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/almanac/properties/f/flex-wrap/