响应div块和文本

Question

你好我正在制作自己的wordpress bootstrap主题。我有一件事我想让它在手机和平​​板电脑上运行得很好。现在在移动模式下，我的网站标题与我的信息框混合在一起。我认为，当在较小的屏幕上访问该页面时，我可以在文本框下移动我的文本框会很好。 你可以在图片中看到我的问题：

我的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"> (+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>

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;

}

我希望有人能引导我以某种方式解决这个问题并指出一些好的建议。谢谢！