html - 当窗口变小时向下移动导航栏的部分

Question

我希望我的导航栏有 4 个链接，中间有一个品牌 Logo (每侧 2 个链接)。我正在使用 bootstrap，所以我想要的是当屏幕很小时，然后让链接位于品牌下方。所以不是 2 个链接，然后是品牌，然后是 2 个链接都在一行上，我有品牌，然后是下一行在下面的中心，4 个链接。但我不知道该怎么做？这是我到目前为止所拥有的 fiddle 。注意:在我的笔记本电脑上，我无法将此 fiddle 调整为 md 大小(>992 像素)

HTML:

<div id="navbar" class="li flex-container nav">
    <a class="nav-link flex-item col-md-2 col-md-offset-1 col-sm-3" href="#">PHOTOGRAPHER</a>
    <a class="nav-link flex-item col-md-2 col-sm-3 " href="#">PORTFOLIO</a>
    <a class="hplogo-a flex-item col-md-2 col-sm-12" href=""><img id="logo" src="http://www.morushsoccer.com/_uploads/563cff4e616e743953300000/Adidas.png" alt=""></a>
    <a class="nav-link flex-item col-md-2 col-sm-3" href="#">INVESTMENT + FAQ</a>
    <a class="nav-link flex-item col-md-2 col-sm-3" href="#">BLOG</a>
</div>

CSS:

body{
  background-color: #333;
  overflow-x: hidden;
  margin:0px;

}

.nav{
 list-style-type: none;
 display: inline;
 z-index: 2;

}

.resize-anchor{
  display: inline-block;
  height: auto;
  width: 300px;
}
.hplogo-a{
  display: inline-block;
  height: auto;
  width: 200px;
  min-width: 200px;
}

a:hover{
  color:#D1946F;
  text-decoration: none;
}

a:link{
  color:#D1946F;
  text-decoration: none;
}

.navlink, .hplogo-a{
  text-align: center;
  display:inline-block;
  margin-left: 5px;
  margin-right: 5px;
}
.nav-link{
 color:white;
 text-decoration: none;
 white-space: nowrap;
 text-align: center;
 font-family: Calibri;
 font-size: 18px;
 font-style: normal;
 font-variant: normal;
 line-height: 26.4px;
 padding:0px;
 margin-top: 20px;
}
img{
  width:100%
  }
}

https://jsfiddle.net/b6ks4mfk/

Answer 1

一个简单的解决方案是在 html 代码中有两个 Logo ，每个 Logo 都有不同的类。然后使用媒体查询和显示属性(隐藏/初始/ block 等)根据屏幕大小显示或隐藏 Logo 。