Tabs bootstrap на мобильной версии иконки без текста, как?

Question

[akula22]

Использую Tabs X от Катрика demos.krajee.com/tabs-x и Bootstrap v3.3.7
Табы выводятся слева

<?= TabsX::widget([
            'enableStickyTabs' => true,
            'items' => $items,
            'position' => TabsX::POS_LEFT,
            'bordered' => true,
            'encodeLabels' => false
        ]); ?>

выводится иконка а дальше текст ссылки

'label' => FI::icon(
                'file-alt',
                ['class' => 'icofont-1x']
            ) .' Размер и тираж',

Я хочу на мобильной версии на табах видеть только иконки без текста, подскажите как это сделать?

HTML код получается такой

<div id="w1-container" class="tabs-x  tabs-left tab-align-left tab-bordered tabs-krajee">
<ul id="w1" class="nav nav-tabs hidden-print" data-krajee-tabsX="tabsX_00000000" role="tablist">
<li class="active"><a href="#tab0" data-toggle="tab" role="tab" aria-selected="false" aria-controls="tab0">
<i class="icofont-1x icofont icofont-file-alt"></i> Размер и тираж</a></li>

Answer 1

[akula22]

Или вообще как убрать блок с табами в мобильной версии, оставить один контент
hidden-xs скрывает табы, а пустое место остается

Answer 2

[Planet_93]

Попробуйте использовать свой стиль.

В CSS прописать класс, который будет работать при маленьком размере экрана

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
            .my-hidden {
                display: none;
            }
        }

И в HTML используйте его либо для самого таба, либо для теста

<li class="active"><a href="#tab0" data-toggle="tab" role="tab" aria-selected="false" aria-controls="tab0">
<i class="icofont-1x icofont icofont-file-alt"></i> <div class="my-hidden">Размер и тираж</div></a></li>

В данном случае текст Размер и тираж на мобильниках с разрешением меньше 480px по ширине появляться не будет