Адаптивная верстка и bootstrap
Имеется страница с использованием сетки bootstrap. На странице два элемента col-*, первое с контентом, второе с меню.
<div class="row">
<div class="col-md-9 col-12 content">
Контент
</div>
<div class="col-md-3 col-12 menu">
Меню
</div>
</div>
При просмотре с малых экранов верстка соответственно съезжает, контент сверху, а меню ниже. Мне необходимо, чтобы меню было сверху. Как это можно реализовать?
Ответы (1 шт):
Автор решения: Deonis
→ Ссылка
Визуальное изменение порядка работает для flex элементов. Дополнительно, посмотрите эту информацию
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<div class="row">
<div class="col-md-9 col-12 order-1 content">
Контент
</div>
<div class="col-md-3 col-12 order-md-1 menu">
Меню
</div>
</div>