Html 移动屏幕显示时，如何在导航栏中相邻放置两幅图像

我需要在导航栏中放置两个png-s，当它们在较小的屏幕上进入汉堡包菜单时，我需要它们彼此相邻。有什么建议吗？ 以下是我目前的代码：

<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>

---

怎么做？

使用内联块，如下所示：

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

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

}

---

使用内联块，如下所示：

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

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

}

---

如果您使用的是引导4 将此媒体查询用于手机

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

}

---

如果您使用的是bootstrap3 将此媒体查询用于手机

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

}

---

如果您使用的是引导4 将此媒体查询用于手机

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

}

---

如果您使用的是bootstrap3 将此媒体查询用于手机

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

}