Скрыть выпадающий список bootstrap с помощью медиазапроса

У меня есть выпадающее меню bootstrap, которое видно только при определенной ширине экрана. Моя проблема заключается в том, что когда я изменяю размер экрана, чтобы скрыть кнопку выпадающего меню, ранее нажатое/открытое выпадающее меню остается открытым.

Есть ли способ закрыть выпадающее меню или избавиться от класса show для меню на основе медиа-запроса? Я видел ответы на похожие вопросы, но ни один не помог мне.

Вот мой код:

<div class="dropdown center">
          <div
            class="sm-screen-dropdown"
            dropdown-toggle
            type="button"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            <i class="fa-solid fa-bars menu-icon"></i>
          </div>
          <ul
            class="dropdown-menu sm-screen-dropdown-menu"
            aria-labelledby="dropdownMenuLink"
          >
            <li>
              <a class="dropdown-item" href="/">Home</a>
            </li>
            <div class="dropdown-divider no-margin"></div>
            <div class="ms-2">
              <li>
                <a class="dropdown-item" href="{% url 'home' %}">Groups</a>
              </li>
              <li>
                <a class="dropdown-item" href="{% url 'taglist' %}">Tags</a>
              </li>
            </div>
          </ul>
        </div>

вот мой css: 

.sm-screen-dropdown-menu {
  top: 48px !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
    rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  border: none;
  border-radius: 0px;
  padding: 0;
  min-width: 200px;
}

@media (max-width: 600px) {
  .hide-sidebar {
    display: none !important;
  }
  .sm-screen-dropdown {
    display: flex;
    font-size: 20px;
    margin-right: 15px;
    margin-left: 10px;
    text-decoration: none;
  }

  .sm-screen-dropdown:hover {
    cursor: pointer;
  }
}

Какой css я могу добавить, чтобы закрыть выпадающее меню? Сейчас оно остается открытым, пока не расфокусируется, но я бы хотел, чтобы оно закрывалось, как на этом сайте.

Я использую bootstrap 5

Вы не выполняете свой код в виде сниппета, что затрудняет получение полной картины. Однако я собрал это вместе, чтобы показать вам, как скрывать/отображать элементы на основе медиа-запроса в JS, а не в CSS.

Запустите сниппет на полной странице, проинспектируйте и уменьшите ширину области просмотра, и вы увидите, что круг исчезает, когда область просмотра меньше 576px

Вы также можете ознакомиться с этим Codepen

const smallDevice = window.matchMedia("(min-width: 576px)");
let circle = document.querySelector(".shape.circle");

smallDevice.addListener(handleDeviceChange);

function handleDeviceChange(e) {
  if (e.matches) circle.style.display = 'block';
  else circle.style.display = 'none';
}

//run it initially
handleDeviceChange(smallDevice);
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
}

.shape {
  width: 250px;
  height: 250px;
  border: 1px solid black;
}
.shape + .shape {
  margin-top: 1rem;
}
.shape.box {
  background: blue;
}
.shape.circle {
  border-radius: 50%;
  background: red;
}
<div class="shape box"></div>
<div class="shape circle" style="display: none;"></div>

Вернуться на верх