Дублирование элементов в угоду адаптивности

Question

[Влад Романовский]

Здравствуйте!
Возникла такая проблема: на сайте присутствует функциональный элемент, который должен адаптироваться под разрешения экрана, но из-за своих размеров он не может грамотно подстроится, а bootstrap 3 со своей новой grid системой не позволяет подстроить для мелких экранов интерфейс.
Покажу на примере.

Заголовок с кнопками у таблицы надо подстроить под смартфоны, но уменьшение пропорциональное не спасет - кнопки налезают на заголовок.
Поэтому я скрываю эти кнопки, и вывожу вместо их

В итоге в странице сосуществуют 2 элемента, выполняющие одну и ту же функцию, но для разных экранов и скрывающиеся через hidden-lg или visible-lg.
На сколько подобное решение плохое? Не хочется особо костыли наворачивать и изменять сам бутстрап.
И пример на самом деле не единственный. Возникло несколько подобных ситуаций, когда надо дублировать функционал

Comments

[Влад Романовский]

<div class="btn-group pull-right visible-lg">
                    <button type="button" class="btn btn-default active">Все</button>
                    <button type="button" class="btn btn-default">Текущие</button>
                    <button type="button" class="btn btn-default">Завершенные</button>
                    <button type="button" class="btn btn-default">Приостановленные</button>
                    <button type="button" class="btn btn-default">Пропущенные</button>
                    <button type="button" class="btn btn-default">В планах</button>
                </div>
                <div class="btn-group hidden-lg pull-right">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        Меню <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li class="active"><a href="#">Все</a></li>
                        <li><a href="#">Текущие</a></li>
                        <li><a href="#">Завершенные</a></li>
                        <li><a href="#">Приостановленные</a></li>
                        <li><a href="#">Пропущенные</a></li>
                        <li><a href="#">В планах</a></li>
                    </ul>
                </div>

Answer 1

[alexesDev]

У бутстрапа верхнее меню скрывается также как и у вас, только там полоски вместо слова меню. Чем это решение не подошло?

Comments

[Влад Романовский]

У меня это panel. Я в хидер всунул навигацию такую :) Ну и вообще есть другие спорные моменты в других элементах интерфейса

Answer 2

[Андрей]

все что дублируется в разметке можно дублировать js почему нет.

$( "#main_nav ul" ).clone().appendTo( "#mobile_nav" );

Comments

[Влад Романовский]

Вы не поняли сути вопроса :) Добавил пример кода под вопрос свой