Bootstrap 4 NAVBAR с тремя элементами

Я пытаюсь использовать Bootstrap 4 с тремя элементами в navbar. Я хочу, чтобы марка была слева, а предметы navbar-nav - справа.

Эта часть проста, моя проблема в том, что мне нужен еще один раздел, который должен быть выровнен по левому краю, рядом с BRAND.

Он делает то, что я хочу, когда экран большой (см. Ниже).

Моя проблема в том, когда экран становится меньше. Третий пункт перескакивает в середину, и я не могу понять почему.

Документация наводит меня на мысль, что я могу использовать гибкое поведение, но ничего из того, что я пробовал, не работает.

Можно ли это сделать из коробки?

Я установил образец кода на codeply, который можно увидеть здесь: http://codeply.com/go/6y6XapGG4k

Когда порт просмотра большой, вы можете видеть, что слева отображается кнопка example.com. Когда экран сжимается и элемент меню сжимается, кнопка example.com перескакивает в середину экрана.

Я стараюсь, чтобы кнопка оставалась слева, рядом с БРЕНДОМ.