Not found : add responsive links to positions in header

Hi,
at header position "scroll down" link goes to a position, fine.
I added by copy/paste 4 new links to go to other positions with the same scroll effect
but I don't find how to display a responsive position for these links with small tablets or screens.
I'd like links go vertical on small tables for example.

What I did : copy class ".gkAnimate.reverse" in gk-stuff.css
then at override.css, I pasted it 4 times and renamed as ".gkAnimate.reverse2" , ".gkAnimate.reverse3"...
with new values for translateX (that enables display all links on one line)
In Header module (code editing) I modified "class="gkScrollDown gkAnimate reverse" " for each new link I added
(class="gkScrollDown gkAnimate reverse2" for example)
and changed the href url to scroll to other position.

This suits well to desktops only of course
Do you have an idea to reach the same thing with responsive effect too ?

Thanks !

Ok solved.
small-tablet.css and small-desktop.css have to be modified too with values for
.gkAnimate.reverse1 (add margin-left and width enable to position the arrow at the center of your text + place the link horizontally)
.gkAnimate.reverse2
etc..
-> Add margin-left and width enable to position the arrow at bottom center of your text
-> TranslateY value will place the link vertically / TranslateX value at 0 or commented and use margin-left value
.gkScrollDown::after (modify font-size and top values to suit with the devices)

Doing this I could change position for my links automatically on Ipad (small-desktops) and small mobiles (small-tablets)