希望我的导航在徽标引导下

Question

我希望我的导航在手机上显示在我的徽标下（sm，xs） 没有媒体查询怎么做？ 当sm或xs我希望我的徽标位于中心顶部而我的导航就像徽标位于徽标下方：）

标志：

<div class="row">
 <nav id="home" class="sliding-menu col-md-8">
  <div id="arrow_up"><img src="./images/arrow-up.png" /></div>
   <div id="logo" class="col-lg-4 col-md-4 col-sm-12">
     <div class="front">
     <span class="name">Rayetzky</span>
  </div>
 <div class="row">
  <div class="back">
     <div class="back_logos">
      <a href="https://www.instagram.com/rayetzkyyy" target="_blank"><i class="fa fa-instagram blackiconcolor" aria-hidden="true"></i></a>
      <a href="https://new.vk.com/rayetzki" target="_blank"><i class="fa fa-vk blackiconcolor" aria-hidden="true"></i></a>
      <a href="https://github.com/lil-chipmunk" target="_blank"><i class="fa fa-github blackiconcolor" aria-hidden="true"></i></a>
    </div>
   </div>
  </div>

导航：

<ul class="bar row col-md-10 col-sm-10">
  <li><a href="#home"><b>Home</b></a></li>
  <li><a href="#about"><b>About</b></a></li>
  <li><a href="#skills"><b>Skills</b></a></li>
  <li><a href="#contacts"><b>Contacts</b></a></li>
</ul>

CSS for this: 

 nav {
  position: relative;
  top: -40px;
}

使用FlexBox

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 0px;
  left: 600px;
  font-family: 'Amatic SC', sans-serif;
  font-weight: bold;
  letter-spacing: 5px;
  font-size: 25px;
  color: black;
}

.bar a, .bar a:hover {
  text-decoration: none;
  color: black;  
}

#logo {
 height: 80px;
 width: 185px;
 font-size: 50px;
 font-family: 'Lobster', sans-serif;
 -webkit-box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.2);
 box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.2);
 position: relative;
 right: -300px;
 top: 50px;
 transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d;
 -webkit-transition: 0.5s;
 -moz-transform-style: preserve-3d;
 -moz-transition: 0.5s;
 transition: 0.5s;
}