Как сделать чтобы не плыла верстка в два столбца для мобильной версии?

Question

[Greg Plitt]

Есть адаптированный сайт под мобильную версию, мне нужно вставить туда текст на главную страницу и разбить его на два столбца.
Использую обычную структуру

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

В итоге когда смотрю мобильную версию, второй столбец постоянно вылазиет за границы и создает горизонтальную прокрутку.
На других сайтах, где подобным образом сделано, второй столбец просто уходит под первый.
Как такое сделать?

Answer 1

[HamSter]

Использую обычную структуру

Это уже, давно, не обычная структура для верстки двух колоночного макета. Сейчас табличная верстка исключительно для таблиц (ну и для html писем, хотя и там уже прогресс).
Используйте div.
К примеру так 1. с помощью float: left или так 2. с помощью display: inline-block.
Есть еще вариант с помощью flex.

Answer 2

[Максим Тимофеев]

На других сайтах вряд ли используют таблицу для этого, для этого используют div и медиа запросы в css.
Посмотрите вот это: getbootstrap.com/css/#grid-media-queries

Answer 3

[Михаил Шведков]

1. Забыть про табличную верстку. Табличная верстка полезна для табличных данных - не более чем.
2. Указать максимальную ширину для обертки абзацев