Как поместить два изображения в навигационную панель рядом друг с другом, когда на экране мобильного телефона

Question

Мне нужно поместить два png-ов в navbar, и они должны быть рядом друг с другом, когда они находятся внутри меню гамбургеров на маленьких экранах.Любые предложения?Вот мой код:

<li class="nav-item" >
    <a id="insta" href="#" class="nav-link"><img width="35" height="35" src="insta.png" alt=""></a>
        </li>
    <li class="nav-item" >
      <a id="insta" href="#" class="nav-link"><img width="35" height="35" src="insta.png" alt=""></a>    
      </li>

Как это можно сделать?

Answer 1

Если вы используете Bootstrap 4 Используйте этот медиа-запрос для мобильных устройств

@media (max-width: 576px) { 
.nav-item {
    display: inline-block;
  }

}

Если вы используете Bootstrap 3 Используйте этот медиа-запрос для мобильных устройств

@media (max-width: 768px) { 
.nav-item {
    display: inline-block;
  }

}

Answer 2

Используйте встроенный блок, например:

@media screen and (max-width: 800px) {

  li.nav-item {
    display: inline-block;
  }

}