Отображение элементов в раскрывающемся списке только для экрана xs

Question

Мне нужно, чтобы 3 элемента отображались только в раскрывающемся списке только на экране xs. Пожалуйста, посмотрите код и помогите мне с ним. Это ссылка на веб-страницу: https://krishna2l.github.io/coursera-test/mod3_solution/

    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span></button>
      </div>

    <div id="collapsable-nav" class="collapse navbar-collapse">
    <ul id="nav-list" class="nav navbar-nav visible-xs">
    <li>
        <a href="#">Home</a></li>
    <li>
        <a hef="#">About</a>
    </li>
    <li>
        <a href="#">Help</a>
     </li></ul> 
    </div></div></nav>

Answer 1

Чтобы скрыть элементы, просто используйте класс .d-none или один из классов .d- {sm, md, lg, xl} -none для любого варианта адаптивного экрана.

Чтобы показать только элемент на заданном интервале размеров экрана вы можете объединить один класс .d- -none с классом .d- - *, например .d-none .d-md-block .d-xl-none скроет элемент для всех размеров экрана, кроме средних и больших устройств.

См. их официальную документацию: https://getbootstrap.com/docs/4.5/utilities/display/