Duplicate elements for the sake of adaptability

Question

css

Hello!
There was such a problem: the site has a functional element that should adapt to screen resolutions, but because of its size it cannot correctly adjust, and bootstrap 3 with its new grid system does not allow you to adjust the interface for small screens.
I'll show you with an example.

The heading with buttons near the table needs to be adjusted for smartphones, but proportional reduction will not save - the buttons fit on the heading.
Therefore, I hide these buttons and display them instead

. As a result, 2 elements coexist on the page that perform the same function, but for different screens and are hidden through hidden-lg or visible-lg.
How bad is this solution? I don’t want to especially screw up crutches and change the bootstrap itself.
And the example is actually not the only one. There were several similar situations when it was necessary to duplicate the functionality

Answer 1

In bootstrap, the top menu is hidden the same way as in yours, only there are stripes instead of the word menu. Why didn't this solution work?

Answer 2

everything that is duplicated in the markup can be duplicated js why not.

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