XF 2.2 Скрывать на пк и отображать на мобильных и наоборот.

[DarkShy]

Привет!
Есть два вида блоков:

<h1 style="font-size:20px" class="min">
            Мониторинги:
        </h1>
        <div class="mon">
            <a href="https://wargm.ru/server/53536" class="monit_img"><img src="https://wargm.ru/img/srv/pr/46860/53536.png" alt="wargm.ru - рейтинг серверов"></a>
            <a href="https://wargm.ru/server/53112" class="monit_img"><img src="https://wargm.ru/img/srv/pr/46860/53112.png" alt="wargm.ru - рейтинг серверов"></a>
            <a href="https://wargm.ru/server/53844" class="monit_img"><img src="https://wargm.ru/img/srv/pr/46860/53844.png" alt="wargm.ru - рейтинг серверов"></a>
            </div>
        <div class="mob_mon">
            <a href="https://wargm.ru/server/53536"><img src="https://wargm.ru/img/srv/pr/46860/53536.png" alt="wargm.ru - рейтинг серверов"></a>
            <a href="https://wargm.ru/server/53112"><img src="https://wargm.ru/img/srv/pr/46860/53112.png" alt="wargm.ru - рейтинг серверов"></a>
            <a href="https://wargm.ru/server/53844"><img src="https://wargm.ru/img/srv/pr/46860/53844.png" alt="wargm.ru - рейтинг серверов"></a>
        </div>

Исследуя сайт нашел инфу про xf-responsiveMedium и прочее, но чет не до конца разобрался - как отключать на пк и показывать на мобильном и наоборот.
Код css:

.mon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.monit_img{
    margin-right:10px;
}
@media (max-width: @xf-responsiveWide) {
    .mon {
        display: none;
    }
}
@media (max-width: @xf-responsiveNarrow) {
    .mob_mon {
        display:none;
}

Всем спасибо!

 

[DarkShy]

На мобильной версии отображается как надо:


А вот на пк:

 

[wkes]

в классе .mon display ; flex попробуй поменять на none
Что бы получилось так

.mon {
    display: none;
    align-items: center;
    justify-content: center;
}
.monit_img{
    margin-right:10px;
}
@media (max-width: @xf-responsiveWide) {
    .mon {
        display: none;
    }
}
@media (max-width: @xf-responsiveNarrow) {
    .mob_mon {
        display:none;
}

 

[DarkShy]

в классе .mon display ; flex попробуй поменять на none
Что бы получилось так

.mon {
    display: none;
    align-items: center;
    justify-content: center;
}
.monit_img{
    margin-right:10px;
}
@media (max-width: @xf-responsiveWide) {
    .mon {
        display: none;
    }
}
@media (max-width: @xf-responsiveNarrow) {
    .mob_mon {
        display:none;
}

Если сделать none, то он скроет блок везде. А нужно чтобы на пк он отображал одним образом, а на телефоне другим.

 

[nictic123]

Если сделать none, то он скроет блок везде. А нужно чтобы на пк он отображал одним образом, а на телефоне другим.

Mobile Detection in Template подойдет? Или медиа-запросами. Можно скрыть или прописать другие классы => другой less и другую логику отображения.