How to rebuild two rows with three cells into three rows with two cells?

Question

css

I'm drafting a letter. On the desktop version, there should be three cells with products in a row, below them there is another row with three products. On mobile, all this should be rebuilt as follows: the goods become 2 pcs in three lines. I broke my head how to do this in a tabular layout. I cordially ask you not to suggest to type-up NOT with tables: this approach will not work in the layout of LETTERS.
I found only one way out, and a very clumsy one: make another third line on the desktop with two cells, hide it and show it only on mobile. On mobile, hide the third cells from the first two rows.
Please, is there a better way?

Answer 1

I solved the issue as follows:
I make three separate tables inside one large one. Each table has only one row with one cell, each cell has two spans with display: block property.
So visually, we get as if two rows of 3 cells each.
On mobile, through media queries, we set adaptability for each table (so that it occupies 100% of the width) and for each span, the following parameters:
display: inline-block;
width: 130px (here the width can be taken arbitrarily, just with this in my case on the mobile screen, both blocks are placed in one line and are not rearranged for each other).
Plus, we set the indents we need so that the blocks do not stick to each other.
Thanks to everyone who responded and offered their options!

Answer 2

https://getinstance.info/articles/css/responsive-t...

Answer 3

Try to make a table for the desktop version with flexes and then use media width: 740px, write the mobile version with flexes.

Answer 4

It is necessary to wrap the closing and opening tags of the rows in conditional comments for Outlook, and make the cells inline blocks.

<tr>
    <td>
        1-ая колонка
    </td>
    <td>
        2-ая колонка
    </td>
    <td>
        3-ая колонка
    </td>
<!--[if (gte mso 9)|(IE)]>
</tr>
<tr>
<![endif]-->
    <td>
        4-ая колонка
    </td>
    <td>
        5-ая колонка
    </td>
    <td>
        6-ая колонка
    </td>
</tr>