Bootstrap nav walker custom split menu, custom mobile view menu php - php

Question

I am pretty new to Bootstrap and php.
I want my navigation to have a centered brand with logo and the links to different pages left and right next to the logo. Then I want to have social media icons on the top right.
In the mobile view I want a different order of menu items. the brand with logo on the top and the social media at the bottom.
Does this make any sense? Here is my code so far. I have no idea how I can use the navwalker on this custom menu.
<a class = "navbar-brand visible-xs" href = "<?php echo esc_url(home_url()); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="logo">" width="50">
</a><!-- /navbar-brand visible-xs -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <!-- /navbar-toggle -->
</div> <!-- /navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right hidden-xs social ">
<li><i class="fa fa-lg fa-facebook"></i></li>
<li><i class="fa fa-lg fa-instagram"></i></li>
<li><i class="fa fa-lg fa-500px"></i></li>
</ul><!-- /hidden-xs social -->
<ul class="nav navbar-nav navbar-center">
<li>HOME</li>
<li>PORTFOLIO</li>
<li class="dropdown hidden-xs"><img id="logo-navbar-middle" src="C:\Users\Carolin_2\Desktop\nicole\logonew.png" width="50"</img></li>
<li>LEISTUNGEN</li>
<li>KONTAKT</li>
</ul><!-- /navbar-nav -->
<ul class="nav navbar-nav navbar-center visible-xs social nav-pills">
<li><i class="fa fa-lg fa-facebook"></i></li>
<li><i class="fa fa-lg fa-instagram"></i></li>
<li><i class="fa fa-lg fa-500px"></i></li>
</ul><!-- /visible-xs social -->
</div> <!-- /navbar-collapse-->
</div><!-- /container fluid-->
CSS Code
/* === NAVBAR ===*/
.navbar{
background-color: black;
margin-bottom: 0;
border: 0;
}
.navbar-inverse .navbar-nav>li>a{
text-align: center;
color: white;
display: inline-block;
float:none;
vertical-align: top;
}
#media (min-width: 768px){
.navbar-nav{
float:none;
margin: 0 auto;
display: table;
table-layout: fixed;
}
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-inverse .navbar-toggle -.icon-bar{
color: white;
}
Can anybody help me or give me some advice?
Best,
Carolina