Responsive text div and page Title

Hello guys i start to make my own wordpress Theme with bootstrap and i need help with responsive design. I have a header tile and tagline text and i have a text box what cointains a contact information. When you access page with mobile or tablet modes the Title and text box mixes together. I need to fix it.
Link to image what will explain my problem – https://i.imgur.com/05iyHEN.png

My HTML :

<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 Dashboard > Appearance > Customize','wp-bootstrap-starter');
                    }
                    ?>
                </p>
								<div id="headertxt">
					<a>Zvani - <span class="head"> (+371) 29429748</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>

MY 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;
  width: 100%;
  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;

}