ウィンドウが小さくなるとnavbarの部品が移動する

私のnavbarには4つのリンクとブランドロゴが中央にあります（両側に2つのリンクがあります）。私はブートストラップを使用していますので、画面が小さいときには、ブランドの下に行くリンクが必要です。だから、2つのリンクの代わりに、ブランド、2つのリンクをすべて1つのラインに、私はブランドを持っていたし、中央の次のラインの下に、4つのリンク。しかし、私はこれを行う方法がわからないのですか？ここに私がこれまで持っていたことのバイブルがあります。注：私のラップトップ上で、私はMDサイズに、このためにバイオリンを作ることはできません（> 992ピクセル）ウィンドウが小さくなるとnavbarの部品が移動する

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/

出典

2017-10-24 BrownBoii333