alternating columns on mobile
Hi there, is there a way to make alternating 2-column rows stack up the same way? In other words, let's say I have a table with 3 rows, 2-columns. Here's the code:
<tr> <td>ROW 1, LEFT COLUMN</td> <td>ROW 1, RIGHT COLUMN</td> </tr> <tr> <td>ROW 2, RIGHT COLUMN</td> <td>ROW 2, LEFT COLUMN</td> </tr> <tr> <td>ROW 3, LEFT COLUMN</td> <td>ROW 3, RIGHT COLUMN</td> </tr>
Here's how the desktop view would look like:
But on mobile, I want it to stack like this:
As you can see, in the second row, the right column stacks over the left column. How do I do that? I can only stack the left column above the right column by assigning a class that floats left to each of the 2 TD tags per row. Hope this makes sense, thanks in advance!