Move on click - html, css only - media queries - css

Question

I have a link on my menu items and id's on h2 of the text that belong to it. All I want to do is easy - when I click on certain item in the menu I want it to move down to the text that belongs to it. Easy.
I have it like side menu on the left and next to it is the text. When the resolution is under 479px the "side menu" is at the top and the text is under it. And what I want it to do is only when it is under this resolution - to jump down to the text (h2). When is it side by side it is fine and there is no need to do that of course. So my question is.. is it posiible to do so somehow only by using html and css? To make it work ("jump") only when it is under 479px? Media queries somehow?
Thanks you
<section id="budova">
<div class="materials">
<div class="container">
<h1>BUDOVA (izolace)</h1>
<div class="materials-container">
<div class="kategorie">
<h2 data-kategorie="#silsonic" class="active">Silsonic</h2>
<h2 data-kategorie="#mappysil400">Mappysil CR 400</h2>
<h2 data-kategorie="#mappysil404">Mappysil CR 404</h2>
<h2 data-kategorie="#polistik">Polistik / M under special HQ</h2>
<h2 data-kategorie="#pavisol">Pavisol</h2>
<h2 data-kategorie="#mappysilent">Mappysilent</h2>
<h2 data-kategorie="#fonosilent">Fonosilent</h2>
<h2 data-kategorie="#bugnato">Mappysil CR Bugnato</h2>
<h2 data-kategorie="#mappysil-re">Mappysil CR RE</h2>
<h2 data-kategorie="#mappypren">Mappypren AU</h2>
<h2 data-kategorie="#stopfire">Stopfire Bugnato</h2>
</div>
<div class="produkty" id="produkty">
<div id="silsonic" class="active">
<h3>Silsonic</h3>
<img src="./img/materials/budova/silsonic.jpg" alt="Silsonic">
<p>Cena od 150 kč vč. DPH</p>
<p>v 40/š 600/d 1200 mm ( ostatní rozměry v sekci ceník )</p>
<p>SILSONIC je termoizolační a akusticky absorpční materiál vyrobený z tepelně zpracovaných, recyklovaných polyesterových vláken. Panely SILSONIC se používají k tepelné a zvukové izolaci všech druhů zdiva, sádrokartonových konstrukcí, stropů a pro podstřešní izolace.</p>
</div>
.
.
.
more text
CSS
.materials-container {
display: grid;
grid-template-columns: 1fr 3fr;
margin: 3rem 0;
}
.materials h1 {
text-align: center;
padding: 6rem 0 1.5rem;
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 1px;
border-bottom: 1px solid;
width: 90%;
margin: auto;
}
.kategorie {
background-color: #c4c4c4;
text-align: center;
padding: 1rem 0;
border-radius: 10px;
margin-bottom: 8rem;
}
.produkty {
display: flex;
justify-content: center;
/* align-items: center; */
margin-left: 10rem;
}
.produkty div {
display: none;
}
.produkty div.active {
display: initial;
}
.produkty h4 {
text-transform: uppercase;
margin-top: 3rem;
}
.produkty p:first-of-type,
.produkty p:nth-of-type(2) {
font-weight: 600;
}
.produkty img {
max-width: 300px;
}
.materials {
padding-bottom: 40px;
}
.materials p {
line-height: 24px;
}
.materials h1 {
margin-bottom: 5rem;
}
.materials h2 {
width: 70%;
cursor: pointer;
font-size: 1.2rem;
font-weight: 300;
padding: 0.8rem 0;
border-bottom: 1px solid transparent;
margin: 0 auto;
transition: all 0.3s;
}
.materials h2:hover {
border-bottom: 1px solid #fff;
color: #fff;
}
#media (max-width: 479px) {
.main-text p {
line-height: 2rem;
}
.main-text h1 {
padding: 4rem 0 0.5rem;
}
.photos img {
width: 60%;
margin: auto;
}
.photos {
height: 160px;
}
.nav-menu .logo {
width: 53%;
height: 52px;
}
.materials-container {
display: block;
}
.materials h2 {
font-size: 1.2rem;
}
.kategorie {
margin-bottom: 5rem;
}
#fonosilent {
width: 100%;
}
}

Answer 1

make an extra "link" in the html
on small screens one will be hidden (the one without jump-to-link) while the other one (with anchor-tag and jump-to) will be shown.
...
<div class="kategorie">
<h2 data-kategorie="#silsonic" class="active">Silsonic</h2>
<h2 data-kategorie="#silconic" class="active big-screen">Silsonic</h2>
...
media-queries in css:
#media (max-width: 479px) {
.big-screen {
display: none;
}
.small-screen {
display: grid/flex/whatever;
}
}
#media (min-width: 480px) {
.big-screen {
display: grid/flex/whatever;
}
.small-screen {
display: none;
}
}