How to make not floated layout in two columns for the mobile version?

Is adapted for the mobile version, I need to paste there the text on the home page and break it down into two columns.
Use a regular structure
<table>
<tbody><tr>
<td></td>
<td></td>
</tr>
</tbody></table>


In the end, when you look at the mobile version, the second column is constantly just beyond the borders and creates horizontal scrolling.
Other sites where similar image is made, the second column just beneath the first.
How to do that?

8183796574a54fd5b6953e36d8389f8d.jpg
July 9th 19 at 13:35
3 answers
July 9th 19 at 13:37
Solution
Use a regular structure


This is already long, not the usual structure for typesetting two-column layout. Now exclusively tabular layout for a table (well, for html emails, although there is progress).
Use div.
For example so 1. using float: left or so 2. with display: inline-block.
There is another option with flex.
July 9th 19 at 13:39
Other sites are unlikely to use a table for this, for this use the div and media queries in css.
Look at this: getbootstrap.com/css/#grid-media-queries
July 9th 19 at 13:41
1. Forget about the table layout. Tabular layout is useful for tabular data - not more than.
2. To specify the maximum width for the wrapper paragraphs

Find more questions by tags CSSHTMLLayoutMobile development