Is it possible to do without duplicating controls in js+bootstrap?

Question

JavaScript

I am doing a small project for fellow believers - https://clck.ru/9rfbv (the link was removed so that search engines would not gobble up the domain, there is only 1 prayer so far, about 200 are in progress) I
use the standard bootstrap3 template, Web Audio API and native js.
There is almost no experience in this matter, so the question is from the series "how bearded guys do it."
On the right I have the player controls - the choice of language, font size, sound speed and volume, and the main point - looping. All these components look good on all resolutions except for mobile (col-xs).
The question arose - where to put the menu that prevents you from reading text on mobile phones? By the way, thanks for the advice.
So far, the solution is to hide the entire block when col-xs is resolved (which is what happens), and display another menu in one line between the dotted line under the word player and the beginning of the text. There, of course, the controls will be new, they will duplicate functionality.
Several questions arise:
1) How normal is the practice of duplicating controls? ..
2) If such a practice is considered extremely unacceptable - then what solution could be taken in my case? ..
3) One of the options I see is not duplication of the new block, but hiding the old block and opening it by clicking on the "settings" icon or the now fashionable "hamburger". By itself, this option seems to me quite elegant, but how can this be implemented within the framework of the bootstrap template? .. As far as I know, in bootstrap, a hamburger is standardly applicable to the menu, and then it searches it specifically - the elements are simply vertically arranged ...
How would you implemented the page change when switching to the mobile version?..
Where would the player control block be removed?..
Would you duplicate the controls or use a better solution?..

Answer 1

UPD: Duplicate control - double the chance of error and complicate maintenance. If there is another way, then it is better not to multiply entities. For example, a responsive website shows the same HTML code on different screens, changing only CSS styles.
You can move the control using standard bootstrap tools. Hide and open settings - too. For example, if you do

<div class="container">
  <h2>Плеер</h2>
  <div class="row">
    <div class="col-sm-3 col-sm-push-9">управление</div>
    <div class="col-sm-9 col-sm-pull-3">аудиозаписи</div>
  </div>
</div>

then on screens wider than 768px, the control will be to the right of the audio recordings, and on screens narrower than 768px, between the title and the audio recordings.
Does this solve the problem? What else needs to be considered?