I' m trying to get a responsive title + columns with images - html

Question

I'm new to this and this is the first web page I'm trying to create. By far I managed to create 3 columns and make them responsive. But the <h2> + <p> are bothering me. I'm trying to push them above the images when displayed on smartphone/tablet screens.
What should I use?
body, html {
height: 100%;
margin: 0;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(images/sanGalgano.jpg);
height: 70%;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
font-family: 'Bungee Outline', cursive;
font-size: 2rem;
display: inline-block;
text-align: left;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.logo {
text-align: center;
position: absolute;
display: inline-block;
top: 43%;
left: 56%;
width: 45%;
}
/* 3 circles panel */
.container {
background-color: #1F3740;
display: inline-flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.box img {
width: 70%;
height: auto;
border-radius: 50%;
padding-top: 1.5rem;
}
.box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
max-width: 25rem;
min-width: 18rem;
margin: 60px;
text-align: center;
}
.box.description {
margin-top: 0;
}
h2 {
font-family: 'Nothing You Could Do', cursive;
font-size: 3rem;
color: #d4af37;
display: inline-block;
clear: left;
}
p {
font-family: 'Quicksand', sans-serif;
color: #A0C9D9;
font-size: 2rem;
text-align: center;
}
/* 3 columns panel */
.container2 {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
padding: 0 4px;
position: relative;
}
.column {
flex: 20%;
max-width: 20%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
border-radius: 30%;
}
.descrizione {
position: absolute;
top: 30%;
right: 70%;
text-align: center;
}
.descrizione p {
color: #1F3740;
}
<div class="hero-image">
<div class="hero-text">
<h1>Francesco <br> Gallo <br> Fotografo</h1>
<div>
<img class="logo" src="images/logo2.png" alt="">
</div>
</div>
</div>
<div class="container">
<div class="box">
<img src="images/torta.png">
</div>
<div class="box">
<img src="images/bacio.jpg">
</div>
<div class="box">
<img src="images/amiche.png">
</div>
<div class="box description">
<h2>Per i vostri momenti speciali</h2>
<p>Lorem ipsum dolor sit amet <br>consectetur adipisicing elit.<br> Similique molestias hic velit,<br> ipsum facere nemo minus distinctio <br> est quidem neque.
</p>
</div>
</div>
<div class="container2">
<div class="descrizione">
<h2>Ciao, sono Francesco!</h2>
<p>Lorem ipsum dolor sit amet <br>consectetur adipisicing elit.<br> Similique molestias hic velit,<br> ipsum facere nemo minus distinctio <br> est quidem neque.
</p>
</div>
<div class="column">
<img src="images/torta.png">
<img src="images/abbraccio.png">
</div>
<div class="column">
<img src="images/vestito.png">
<img src="images/amiche.png">
</div>
<div class="column">
<img src="images/bacio.jpg">
<img src="images/bolle3.png">
</div>
</div>