Bootstrap 4 отображает свойство на ландшафте не работает?

Question

У меня есть навигационная боковая панель, и я хочу скрыть текст и отображать значки только для iphone + ipad портрет и пейзаж, но я не могу заставить свойство display работать для ландшафта, только для портрета.

HTML-код

<li class="sidenav_links">
                <a href="{% url 'evalsys:home' %}"><span class="fas fa-home"></span></a>
                <a class="d-none d-sm-block d-md-none d-lg-inline" href="{% url 'evalsys:home' %}">Opret evaluering</a>
            </li>

Медиа-запросы

/* iPhone 6, 7, 8 portrait */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation: portrait)

/* iPhone 6, 7, 8 landsacpe */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation: landscape)

/* iPad Portrait Media Queries  */
 @media only screen
and (min-device-width: 768px)
and (min-device-height: 1024px)
and (orientation: portrait)

/* iPad Landscape Media Queries */
@media only screen
and (min-device-width: 1024px)
and (min-device-height: 768px)
and (orientation: landscape)

Answer 1

Показывать только иконки для iphone + ipad портрет и пейзаж

        body {
            padding: 0;
            margin: 0;
        }
        .sidenav_links {
            background: #dddddd;
            padding: 20px;
            margin: 0;
            list-style-type: none;
        }
        .fas .fa-home {
            display: none;
        }
        @media (max-width: 1366px) {
            .fas .fa-home {
                display: block;
            }
        }

<li class="sidenav_links">
        <a href="{% url 'evalsys:home' %}"><span class="fas fa-home"></span></a>
        <a class="box" href="{% url 'evalsys:home' %}">Opret evaluering</a>
    </li>