You could use flexbox, it's awesome but does have a learning curve, or you could just use CSS's display: table property on the parent <div> and display: table-cell on the children <div> containers. That way, when you get to a breakpoint where you need to separate the table cells, you can just switch the display value to block or inline-block in the media query. I've used this technique many times.

Why don't you want to use <table> ? Is the data in the table not data and your trying to create containers?

Here's an example that uses ZURB Foundation.

Tables shouldn't be used for layout - we're well past those days; but if there is actual data to be displayed, a table should be used; it'll help screen readers / accessibility.

Yes you can easily do that using display:table, display: table-cell, display: table-row to make responsive tables. The only disadvantage of this is that all the cells in a table are always of same width and you can't make them have colspan 2

It's bad. I tried it. If a single cell uses more space than you expected, your whole layout gets broken. You get a crease in your columns.

Better is gridbox but the support is lousy.