[JavaScript][CSS][HTML]Sidebar z Bootstrapa Opcje

[TheNortalf]

Witam

Pobrałem z bootsrapa sidebar https://startbootstrap.com/template-overvie...simple-sidebar/
Sprawa wygląda tak, że muszę go przerobić tak, żeby mieć 3 stany, duże rozdzielczości, tablet, oraz telefon.
Różnice wyglądają tak, że duże rozdzielczości mają mieć sidebar zawsze na wierzchu, tablety także, ale zamiast tekstu mają pojawić się ikony, a telefon ma mieć hamburger menu.

Jako że jestem całkowicie zielony w tworzeniu stron, na logikę doszedłem do kilku rzeczy ale nie mogę przeskoczyć pewnych problemów.

1. Dla dużych rozdzielczości, sidebar ma być zawsze na wierzchu.

[HTML] pobierz, plaintext 
<a href="#menu-toggle" class="btn btn-secondary" id="menu-toggle">Toggle Menu</a>
[HTML] pobierz, plaintext 

To jest mój przycisk który otwiera sidebar. Problem w tym, że nie potrafię wyciągnąć na wierzch mojego sidebara.
Grzebię w jego css ale nic się nie udaje. Jak więc wyciągnąć go na wierzch?

2. Telefony z kolei mają posiadać taki przycisk, jak więc zrobić to w ten sposób, aby na małych rozdzielczościach przycisk się pojawiał, ale na większych i dużych nie?
Taki sam problem mam dla tabletów. Jak to zrobić, żeby zamiast tekstu pojawiły się ikony tylko na tych rozdzielczościach.
Wiem (tak mi się wydaje) gdzie w CSS znajduje się partia kodu odpowiadająca mniejszym rozdzielczościom.
Zaczyna się od tego miejsca:

[HTML] pobierz, plaintext 
@media(min-width:768px) {
  #wrapper {
      .....
[HTML] pobierz, plaintext 

Ale przecież nie zdefiniuję pojawiania się przycisków w CSS, prawda?