Отображать div в качестве боковой панели только на мобильном устройстве только с помощью начальной загрузки

Question

Я хотел бы использовать div как боковую панель наложения только на мобильном устройстве. Кроме мобильного устройства, он должен действовать как обычный div.

Пример кода:

<div class="row">
   <div class="col-lg-3" id="sidebar">
     overlay sidebar only on mobile device
   </div>
   <div class="col-lg-9 col-12">
   </div>
</div>

Как мне сделать id="sidebar" действовать как обычный div и боковая панель на мобильном устройстве.

Answer 1

вы можете достичь, используя медиа-запрос

@media screen and (max-width:767px){ //targets the mobile devices
 #sidebar{
   /*css code goes here*/
 }
}

Answer 2

Вы должны использовать свойство d-block или d-none так:

d-sm-none or d-sm-block

Answer 3

Лучшим способом было бы использовать jquery, чтобы свернуть его ширину, когда был достигнут размер для мобильных экранов