Prevent wrapping of multiple logos in nav in bootstrap 4 xs size - navbar

Question

Most of the examples I found just hide everything except for the brand-logo and just show one toggle icon. But I want multiple icons on small screens but at the moment they wrap on xs size even if they have enough space.
I also replace the bigger icons by smaller icons now, but as it's not the missing space I guess, this does not help either.
The brand-logo and the two icons simply should be in the same line. Can someone please push me in the right direction. You have to run the code-snippet in an own window to make it small enough (problem is just on xs size).
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-48 { font-size: 48px; }
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<header class="header">
<nav class="navbar navbar-light navbar-toggleable bg-faded justify-content-center">
<!--Logo-->
<a class="navbar-brand mr-auto" href="/" title="logo">
<span>logo-img</span>
</a>
<!--
the centered links in the header (only visible on bigger screens)
-->
<ul class="navbar-nav mx-auto justify-content-center hidden-sm-down">
<li class="nav-item">
<a class="nav-link" href="#">link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">login</a>
</li>
</ul>
<!-- the icons on the right (xs screens)
The two (and maybe more) icons SHOULD NOT WRAP
-->
<ul class="nav navbar-nav ml-auto justify-content-end hidden-sm-up">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24">favorite</i>
</a>
</li>
</ul>
<!-- the icons on the right (bigger devices) -->
<ul class="nav navbar-nav ml-auto justify-content-end hidden-xs-down">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48">favorite</i>
</a>
</li>
</ul>
</nav>
</header>

Answer 1

You can use flex-row in the navbar and navbar-nav to prevent it from stacking vertically on xs screens..
https://www.codeply.com/go/beHGmETlkM
<header class="header">
<nav class="navbar navbar-light navbar-toggleable bg-faded justify-content-center flex-row">
<!--Logo-->
<a class="navbar-brand mr-auto" href="/" title="logo">
<span>logo-img</span>
</a>
<!--
the centered links in the header (only visible on bigger screens)
-->
<div class="navbar-collapse collapse">
<ul class="navbar-nav mx-auto justify-content-center hidden-sm-down">
<li class="nav-item">
<a class="nav-link" href="#">link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">login</a>
</li>
</ul>
</div>
<!-- the icons on the right (xs screens)
The two (and maybe more) icons SHOULD NOT WRAP
-->
<ul class="nav navbar-nav ml-auto flex-row justify-content-end hidden-sm-up">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24">favorite</i>
</a>
</li>
</ul>
<!-- the icons on the right (bigger devices) -->
<ul class="nav navbar-nav ml-auto justify-content-end hidden-xs-down">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48">favorite</i>
</a>
</li>
</ul>
</nav>
</header>
https://www.codeply.com/go/beHGmETlkM