Viktor Burdale

Не совсем понятен вопрос.
Если нужно просто обернуть, то:

<span>
   <ol>
        <li>Первый пункт</li>
        <li>Второй пункт</li>
        <li>Третий пункт</li>
   </ol>
</span

или в div:

<div>
   <ol>
       <li>Первый пункт</li>
       <li>Второй пункт</li>
       <li>Третий пункт</li>
   </ol>
</div>

Вроде обычный паттерн.
Есть пример с бустрапом по ссылке:
https://mdbootstrap.com/docs/jquery/css/masks/

Для адаптива рекомендуется использовать rem. Они также просты в использовании, в отличии от em, где нужно помнить в голове значение родителя. Разумеется человек запутается. А с rem все просто:

html { 
    font-size: 100% /* =16px */
}
body {
    font-size: 1rem; /* =16px */
}

Изходя из bootstrap 4, понял что лучше действительно верстать от малого устройства к большему. Точки разрешения беру их же, только зачастую еще добавляю медиа-запрос для max-width: 320px.

Слайдер - Owl-carousel. Только стилизуешь его под себя.