responsive header logo with text - html

Question

I would like for my header to change when viewed on mobile. On the big screen is shows the logo with the text beside it. On mobile I would like for the text to go below the logo and maybe even just 1 line with a bullet between. Right now when I view on mobile, the logo and text resize, but the text gets too big and falls off the screen.
Here is a link to the site:
jeepscycleclub.x10host.com
Here is my css for the #pageheader:
#pageheader {
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
position: relative;
text-align: center;
overflow: hidden;
background-color: #2f2f37;
max-height: 15vh;
}
#pageheader img {
max-height:15vmax;
}
and my html:
<div id="pageheader">
<img src="images/pageheader.gif">
<header>
<h2 style="font-size: 3vh;">Club Info: 316-755-0909</h2>
<h2 style="font-size: 3vh;">FM 100.9 for Race PA System</h2>
</header>
</div>
This is just my test site so I can get everything done before going live with it.
Thank you in advance.

Answer 1

Add flex-wrap: wrap; for this. And you have to change the width/max-width, otherwise there won't be space for the text when it goes under the logo.
#pageheader {
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
position: relative;
text-align: center;
overflow: hidden;
background-color: #2f2f37;
flex-wrap: wrap;
}
#pageheader img {
max-height:15vmax;
}
<div id="pageheader">
<img src="http://placehold.it/150x80/a0f">
<header>
<h2 style="font-size: 3vh;">Club Info: 316-755-0909</h2>
<h2 style="font-size: 3vh;">FM 100.9 for Race PA System</h2>
</header>
</div>