He estado intentando durante horas con diferentes métodos para que mis botones de navegación seancapacidad de respuesta móvil y colapsar en unorden vertical especificada. Quiero que los botones de navegación colapsenuna columna vertical debajo de los dos logotipos, una vez que el tamaño de la pantalla se reduzca (a alrededor de 500 px). ¿Cómo arreglo mi código para lograr esto?

.container-fluid {
  border: 1px solid #000000;
  max-width: 1600px;
  overflow: hidden;
}

.wrap {
  /*background-color: yellow;*/
  /*overflow: hidden;*/
}

.Logos {
  width: 312px;
  display: inline-block;
  /*background-color: blue;*/
}


/*
    .Logos img{
    max-width: 300px;
    height: auto;
    }
    */

.nav.wrap.one {
  display: inline-block;
  /*background-color: green;*/
  float: right;
  margin-top: 25px;
}

ul.navigation {
  font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  /*text-align center;*/
  /*border: 1px solid green;*/
  /*overflow: hidden;*/
}

.navigation li {
  display: inline-block;
}

.navigation a {
  background: #395870;
  background: linear-gradient(#49708f, #293f50);
  border-right: 1px solid rgba(0, 0, 0, .3);
  color: #fff;
  padding: 12px 20px;
  text-decoration: none;
}

.navigation a:hover {
  background: #314b0;
  box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
}

.navigation li:first-child a {
  border-radius: 4px 0 0 4px;
}

.navigation li:last-child a {
  border-right: 0;
  border-radius: 0 4px 4px 0;
}

.row.two {
  background-image: url(https://s1.postimg.org/5gvbly4hin/East_Hyde_Park_Chicago_aerial_0470.jpg);
  background-position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  max-width: 100%;
  height: 550px;
  margin: auto;
}

.floater.box {
  background-color: rgba(255, 255, 255, .40);
  border-radius: 10px;
  /*opacity: .45;*/
  max-width: 75%;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
}

.form-search {
  margin: 0 auto;
  text-align: center;
  font: bold 13px sans-serif;
  max-width: 325px;
  position: relative;
}

.form-search input {
  width: 230px;
  box-sizing: border-box;
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
  background-color: #ffffff;
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
  padding: 14px 15px 14px 40px;
  border: 1px solid #b6c3cd;
  ;
  border-right: 0;
  color: #4E565C;
  outline: none;
  margin-top: 70px;
  -webkit-appearance: none;
}

.form-search button {
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
  background-color: #6caee0;
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
  color: #ffffff;
  padding: 15px 22px;
  margin-left: -4px;
  cursor: pointer;
  border: none;
  outline: none;
}

.form-search i {
  position: absolute;
  top: 15px;
  left: 20px;
  font-size: 16px;
  color: #80A3BD;
}


/* Placeholder color */

.form-search input::-webkit-input-placeholder {
  color: #879097;
}

.form-search input::-moz-placeholder {
  color: #879097;
  opacity: 1;
}

.form-search input:-ms-input-placeholder {
  color: #879097;
}

.nav.wrap.two {
  display: inline-block;
  text-align: center;
  width: 100%;
  margin-top: 10px;
}

<div class="container-fluid">

  <!-- Top Box -->
  <div class="wrap">
    <div class="Logos">
      <img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82" class="img-responsive" />
      <img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82" class="img-responsive" /> </div>
    <div class="nav wrap one">
      <!--navigation buttons-->
      <ul class="navigation">
        <li id="NAV-ONE"><a href="#">LOG IN</a></li>
        <li id="NAV-TWO"><a href="#">BUY A HOME</a></li>
        <li id="NAV-THREE"><a href="#">SELL A HOME</a></li>
        <li id="NAV-FOUR"><a href="#">CONTACT US</a></li>
      </ul>
    </div>
  </div>

  <!-- Middle Box -->
  <div class="row two">
    <div>
      <div class="floater box">

        <form class="form-search" method="get" action="#">
          <input type="search" name="search" placeholder="I am looking for..">
          <button type="submit">Search</button>
          <i class="fa fa-search"></i>
        </form>

      </div>


    </div>
  </div>
</div>

<!-- Bottom Box -->
<div class="row three">
  <div class="nav wrap two">
    <!--navigation buttons-->
    <ul class="navigation">
      <li id="NAV-A"><a href="#">MY LISTINGS</a></li>
      <li id="NAV-B"><a href="#">COMMUNITIES SERVED</a></li>
      <li id,="NAV-C"><a href="#">PROPERTIES</a></li>
    </ul>
  </div>
</div>
</div>

Aquí hay un enlace a mi CodePen:https://codepen.io/IDCoder/full/rGWeEE/