Currently, my table layout looks like this:
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">Content 1</div>
<div style="display:table-cell">Content 2</div>
<div style="display:table-cell">Content 3</div>
<div style="display:table-cell">Content 4</div>
</div>
</div>
With the above code, I am able to successfully display all 4 columns in a single row.
Now, I am looking to create a media query that will modify the table so that it displays only 2 columns per row.
Despite the need for formatting consistency, I prefer to stick with using a table approach rather than switching to flexbox or a bootstrap grid.
Are there any alternate methods available to introduce breakpoints between cells and achieve the desired results purely through CSS?