Две колонки с переходом в одну
Основной текст и дополнительный блок можно разместить в двух колонках, сохраняя логический порядок при переходе на узкий экран.
Назначение
Основной текст и дополнительный блок можно разместить в двух колонках, сохраняя логический порядок при переходе на узкий экран.
Как это работает
Сетка minmax(0,1fr) и ограниченная боковая колонка позволяет основной области сжиматься. Медиаусловие возвращает одну колонку. Порог выбирают по содержимому, а не по названию устройства.
Пример
<style>.layout{display:grid;grid-template-columns:minmax(0,1fr) 14rem;gap:24px}.layout>*{min-width:0;overflow-wrap:anywhere}aside{background:#eaf4ee;padding:16px}@media(max-width:700px){.layout{grid-template-columns:1fr}}</style>
<div class="layout"><section><h2>Основной материал</h2><p>Текст статьи и примеры.</p></section><aside aria-label="Дополнительно">Ссылки по теме</aside></div>Что должно получиться
Широкая область имеет две колонки, узкая — одну. Основная статья остаётся первой и в HTML, и в видимой последовательности.
Граница применения и частая ошибка
Не переставляйте боковую панель визуально перед основным текстом, если её порядок при Tab останется прежним. Также проверьте длинные ссылки и код в обеих колонках.
Самостоятельная проверка
Добавьте длинный URL в основную область и увеличьте размер шрифта. Найдите минимальную удобную ширину двух колонок и скорректируйте порог на основании этого наблюдения.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.