ブートストラップ4のナビゲーションバーのボタンにロゴを垂直に合わせる

モバイルビューのボタンが垂直に揃うように、ブートストラップ4で作成するにはどうすればよいですか？ロゴは左側に、右側にはロゴが表示されます。最小マークアップを使用しています。それを右に揃えるためにボタンにorder: 2を設定する必要がありますか？また、align-items: contentは何らかの理由で垂直方向に整列しても機能しません。ボタンはそれをオーバーライドしているalign-self性質を持っているので、ブートストラップ4のナビゲーションバーのボタンにロゴを垂直に合わせる

http://codepen.io/anon/pen/egypoe

<nav class="navbar navbar-inverse navbar-toggleable-md navbar-affix py-4"> 

    <div class="container"> 
    <div class="d-flex justify-content-between hidden-lg-up"> 

     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler2" aria-controls="navbarToggler2" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
     </button> 

     <a class="navbar-brand" href="#"> 
     <img class="logo img-fluid" src="http://placehold.it/350x150"> 
     </a> 
    </div> 

    <div class="collapse navbar-collapse" id="navbarToggler2"> 

     <ul class="navbar-nav ml-auto mt-2 mt-md-0"> 
     <li class="menu-item">Link 1</li> 
     <li class="menu-item">Link 2</li> 
     <li class="menu-item">Link 3</li> 
     </ul> 
    </div> 

    </div> 
</nav> 

body { 
    background-color: #333; 
} 

.logo { 
    max-width: 183px; 
} 

@media screen and (max-width: 480px) { 
    .navbar-toggler { 
    order: 2; 
    border: 0; 
    } 
    .d-flex { 
    align-items: center; 
    } 
} 

ul li { 
    color: #fff; 
}

出典

2017-01-29 Ivan Topić

コードに完全なコードを入力してください。コンソールに出力を送信しません。 – Rab

何らかの理由で画像が表示されませんが、小さな画面にサイズ変更すると表示されます。デスクトップ上でレイアウトはうまくいくようです –