Responsive div block and text - php

Question

Hello i am making my own wordpress bootstrap theme. And i have one thing what i want to make that it work nice on mobile and tablets. Right now in mobile mode my site Title in mixed together with my info box. I think it would be nice if i could move my text box under the text box when the page is visited on smaller screens.
You can see my problem in image:
My HTML:
<div class="container">
<div class="wrapper">
<h1>
<?php
if(get_theme_mod( 'header_banner_title_setting' )){
echo get_theme_mod( 'header_banner_title_setting' );
}else{
echo 'Wordpress + Bootstrap';
}
?>
</h1>
<p>
<?php
if(get_theme_mod( 'header_banner_tagline_setting' )){
echo get_theme_mod( 'header_banner_tagline_setting' );
}else{
echo esc_html__('To customize the contents of this
header banner and other elements of your site, go to D
ashboard > Appearance >
Customize','wp-bootstrap-starter');
}
?>
</p>
<div id="headertxt">
<a>Zvani - <span class="head"> ([phone]</span><br />
</a>
<a href="mailto:godeli#tvnet.lv">Raksti - <span
class="head_2">godeli#tvnet.lv</span><br /></a>
<a href="/ka-mus-atrast/">Redzi mūs <span
class="head_2">kartē</span><br /></a>
<a><span class="head">57°11'58.4"N 22°12'11.2"E</span><br />
</a>
<hr>
<a href="./rekviziti/"><span
class="head_2">REKVIZĪTI</span></a>
</div>
</div>
<a href="#content" class="page-scroller"><i class="fa fa-fw fa-
angle-down"></i></a>
</div>
</div>
CSS :
header#masthead {
margin-bottom: 0;
background-color: #563d7c ;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1);
padding: .60rem 1rem;
border-bottom: 1px solid #9175bb ;
position: fixed;
z-index: 2000;
width: 100%;
}
.navbar-brand > a {
color: rgba(0, 0, 0, 0.9);
font-size: 1.1rem;
outline: medium none;
text-decoration: none;
color: #fff;
font-weight: 700;
}
.navbar-brand > a:visited, .navbar-brand > a:hover {
text-decoration: none;
}
#page-sub-header {
position: relative;
padding-top: 15rem;
padding-bottom: 0;
text-align: center;
font-size: 1.25rem;
background-size: cover !important;
}
#page-sub-header h1 {
line-height: 1;
text-align: left;
font-size: 4rem;
color: #563e7c;
margin: 0 0 1rem;
border: 0;
padding: 0;
}
#page-sub-header p {
margin-bottom: 0;
text-align: left;
line-height: 1.4;
font-size: 1.25rem;
font-weight: 300;
color: #563e7c;
}
a.page-scroller {
color: #333;
font-size: 2.6rem;
display: inline-block;
margin-top: 2rem;
}
#media screen and (min-width: 768px) {
#page-sub-header h1 {
font-size: 3.750rem;
line-height: 1;
}
#page-sub-header {
font-size: 1.25rem;
}
}
#media screen and (min-width: 992px) {
#page-sub-header p {
max-width: 43rem;
margin: 0 auto;
}
}
#headertxt {
position: absolute;
right: 20px;
bottom: 100px;
background-size: auto;
background: rgba(0, 0, 0, 0.7);
padding: 10px 10px 10px 10px;
}
#headertxt a {
text-align: right;
color: white;
font-size: 20px;
}
I hope someone will lead me to some way how to fix this problem and points me to some good tip. Thanks!