DIV вертикальное выравнивание на экранах мобильных устройств

Question

Я сейчас нахожусь в процессе капитального ремонта моего сайта на мобильном телефоне.У меня были проблемы с настройкой интерактивных DIV-блоков на моей главной странице для мобильных экранов.Вот ссылка на мой сайт: https://www.thefloodplains.com/

Я хочу, чтобы те же кликабельные поля DIV появлялись при просмотре главной страницы моего мобильного сайта, но с оговоркой, что я хочу, чтобы только два из них заполнялипространство на экране мобильного устройства (одно в верхней половине и одно в нижней половине экрана).

Вот как в настоящее время выглядит главная страница моего сайта на мобильном телефоне:

Как видите, нижний DIV не делает весь путь вниз по странице.Я хочу, чтобы два DIV имели одинаковую область, один из которых занимал верхнюю половину экрана мобильного устройства, а другой - нижнюю.

В конечном итоге я хочу, чтобы целевая страница мобильного устройства выглядела примерно так:

Вот CSS / HTML для первой страницы:

Как видите, я использую ".col-md-5 "специально для мобильных.Я пробовал различные методы, в том числе изменение высоты до 50% (как показано выше), но, похоже, на мобильных устройствах высота верхней половины увеличивается только до 50%.

body {
  margin: 0;
  z-index: 1;
  width: 100%;
  /* min-height: 850px; */
  max-width: 100%;
  background-attachment: fixed;
  /* background-repeat: repeat-x; */
  background: white;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background: url(OceanWater.jpg);
  background-attachment: fixed;
}

h1 {
  font-size: 36px;
  font-style: bold;
  text-align: center;
  font-family: 'Montserrat', 'Buernard', Garamond, "Buenard", "EB Garamond", 'EB Garamond';
}

h3 {
  font-size: 36px;
  font-style: bold;
  text-align: center;
  font-family: 'Montserrat', 'Buernard', Garamond, "Buenard", "EB Garamond", 'EB Garamond';
}

img {
  max-width: 100%;
  max-height: 100%;
}

#div1 {
  background-image: url('AboutIcon.png');
  background-position: center center; //center the image in the div
  background-size: cover; //cover the entire div
  background-repeat: no-repeat;
  background-size: 100%;
}

#div2 {
  background-image: url('ArticlesIcon.png');
  background-position: center center; //center the image in the div
  background-size: contain; //cover the entire div
  background-repeat: no-repeat;
  background-size: 100%;
}

#div3 {
  background-image: url('CodingBrackets2.png');
  background-position: center center; //center the image in the div
  background-size: cover; //cover the entire div
  background-repeat: no-repeat;
  background-size: 100%;
}

#div4 {
  background-image: url('ContactIcon.png');
  background-position: center center; //center the image in the div
  background-size: contain; //cover the entire div
  background-repeat: no-repeat;
  background-size: 100%;
}

#div5 {
  background-image: url('FSMusicArt.png');
  background-position: center center; //center the image in the div
  background-size: cover; //cover the entire div
  background-repeat: no-repeat;
  background-size: 100%;
}

#div6 {
  background-image: url('AudioProduction4.png');
  background-position: center center; //center the image in the div
  background-size: cover; //cover the entire div
  background-repeat: no-repeat;
  background-size: 100%;
}

#div7 {
  background-image: url('Violin3.png');
  background-position: center center; //center the image in the div
  background-size: cover; //cover the entire div
  background-repeat: no-repeat;
  background-size: 100%;
}

#div8 {
  background-image: url('GalleryImage2.png');
  background-position: center center; //center the image in the div
  background-size: cover; //cover the entire div
  background-repeat: no-repeat;
  background-size: 100%;
}

#div9 {
  background-image: url('Handshake2.png');
  background-position: center center; //center the image in the div
  background-size: cover; //cover the entire div
  background-repeat: no-repeat;
  background-size: 100%;
}

div {
  background-image: url(../images/please-dont-use-spaces.jpg); //add the background image
  background-position: center center; //center the image in the div
  background-size: cover; //cover the entire div
}


/* @media only screen and (max-width: 600px) {
            .mobileShow {display: inline;}
            .mobileHide {display: none;}
        }    */

@media (min-width: 601px) {
  .desktop-only {
    display: block !important;
  }
}

@media (max-width: 600px) {
  .mobile-only {
    display: block !important;
  }
  .desktop-only {
    display: none !important;
  }
}

@media only screen and (max-width: 479px) {
  .mobile-hide {
    display: block !important;
  }
}

@media only screen and (max-width: 479px) {
  .mobile-hide {
    display: none !important;
  }
}

@media only screen and (min-width: 480px) {
  .desktop-hide {
    display: block !important;
  }
}

@media only screen and (min-width: 480px) {
  .desktop-hide {
    display: none !important;
  }
}

@-ms-viewport {
  width: device-width;
}

@import 'https://fonts.googleapis.com/css?family=Buenard|EB+Garamond|Lora|Roboto';

/* Original
    -------------------------------------------------------------- */

.col-md-5 {
  color: #0081A5;
  height: 50%;
}

.col-md-5:hover {
  background-color: #FFE097;
}

.col-md-5 h3 {
  position: relative;
  transform: translateY(-50%);
}

.col-md-4 {
  color: #0081A5;
  height: 300px;
  border: 1px solid #F97B62;
  position: relative;
}

.col-md-4:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  background: #FFE097;
  opacity: 0;
}

.col-md-4:hover:after {
  opacity: .5;
}

.col-md-4 h3 {
  position: relative;
  z-index: 1;
  top: 40%;
  transform: translateY(-50%);
}

.col-md-4 h1 {
  position: relative;
  z-index: 1;
  top: 40%;
  transform: translateY(-50%);
}


/* The Hover Effects */

.col-md-4 {
  position: relative;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.col-md-4::after {
  content: "";
  border-radius: 5px;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.col-md-4:hover {
  -webkit-transform: scale(1.05, 1.05);
  transform: scale(1.05, 1.05);
  z-index: 99999;
}

.col-md-4:hover::after {
  opacity: 1;
}


/* Button */

.btn {
  background: #F97B62;
  background-image: -webkit-linear-gradient(top, #F97B62, #0081A5);
  background-image: -moz-linear-gradient(top, #F97B62, #0081A5);
  background-image: -ms-linear-gradient(top, #F97B62, #0081A5);
  background-image: -o-linear-gradient(top, #F97B62, #0081A5);
  background-image: linear-gradient(to bottom, #F97B62, #0081A5);
  -webkit-border-radius: 60;
  -moz-border-radius: 60;
  border-radius: 60px;
  -webkit-box-shadow: 0px 0px 0px #666666;
  -moz-box-shadow: 0px 0px 0px #666666;
  box-shadow: 0px 0px 0px #666666;
  padding-right: 10px;
  padding-left: 10px;
  border-top: solid #666666 1px;
  border-bottom: solid #666666 1px;
  text-decoration: none;
}

.btn:hover {
  background: #FFE097;
  background-image: -webkit-linear-gradient(top, #FFE097, #FFE097);
  background-image: -moz-linear-gradient(top, #FFE097, #FFE097);
  background-image: -ms-linear-gradient(top, #FFE097, #FFE097);
  background-image: -o-linear-gradient(top, #FFE097, #FFE097);
  background-image: linear-gradient(to bottom, #FFE097, #FFE097);
  text-decoration: none;
}


/* Basic Structure
    -------------------------------------------------------------- */

h3 {
  font-size: 14px;
  text-align: center;
  font-family: 'Buernard', Garamond, "Buenard", "EB Garamond", 'EB Garamond';
}

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>

  </style>
</head>

<body>
  <div class="desktop-only container">
    <div class="row">
      <a href="About.html" title="About the site and Author">
        <div class="col-md-4" id='div1'>
          <h3>About</h3>
        </div>
      </a>
      <a href="Articles.html" title="Articles and Original Content">
        <div class="col-md-4" id='div2'>
          <h3>Articles</h3>
        </div>
        <a href="CodingCorner" title="Code and Resources for a Variety of Projects">
          <div class="col-md-4" id="div3">
            <h3>Coding Corner</h3>
          </div>
        </a>
    </div>
    <div class="row">
      <a href="contact.html" title="Contact The Floodplains & The FloodShark">
        <div class="col-md-4" id="div4">
          <h3>Contact & Social</h3>
        </div>
      </a>
      <a href="thefloodshark" title="The FloodShark Music and Media">
        <div class="col-md-4" id="div5">
          <h1>
            The FloodShark Music
          </h1>
        </div>
      </a>
      <a href="FloodplainProductions.html" title="An enigmatic, virtual record label">
        <div class="col-md-4" id="div6">
          <h1>Floodplain Productions</h1>
        </div>
      </a>
    </div>
    <div class="row">
      <a href="ClassicalCorner" title="A nook dedicated to sharing and categorizing classical music">
        <div class="col-md-4" id="div7">
          <h3>Classical Corner</h3>
        </div>
      </a>
      <a href="Gallery.html" title="Images, Photographs, and Album Art">
        <div class="col-md-4" id="div8">
          <h3>Gallery</h3>
        </div>
      </a>
      <a href="support" title="Contribute to The Floodplains">
        <div class="col-md-4" id="div9">
          <h3>Contribute / Support</h3>
        </div>
      </a>
    </div>
  </div>
  <div class="mobile-only desktop-hide container">
    <div class="mobile-only desktop-hide row">
      <a href="thefloodshark.html" title="About the site and Author">
        <div class="col-md-4" id='div1'>
          <h3>The FloodShark Music</h3>
        </div>
      </a>
    </div>
    <div class="mobile-only desktop-hide row">
      <a href="FloodplainProductions.html" title="A nook dedicated to sharing and categorizing classical music">
        <div class="col-md-5" id="div7">
          <h3>The Floodplains</h3>
        </div>
      </a>
    </div>
  </div>
</div>
</body>

</html>

А вот как выглядит мой сайт на рабочем столе, для справки:

Абсолютно всякая помощь будет принята с благодарностью.Я вполне уверен, что моя проблема связана с моим CSS и моим текущим использованием @ media.