navbar-brandの大きさによって、折り返してしまいます。

前提・実現したい

rails5, bootstrap4で開発をしていて、navbarを使っているのですが、色々とピンとこないことが多いので教えていただきたいです。今回の問題は、ブランドが４文字の時はどこまでスクロールしてもレイアウトが崩れないのですが、１０文字近くになるとnavbarが二段になってしまいます。要素が画面の幅を超えてしまう時、折り返さずに要素を小さくしてくれるような設定はありますでしょうか？

↑折り返して崩れてしまっている。。

![]
↑要素が画面内に収まれば問題ない。

また、そもそもの質問なのですが、自分のコードのように,container-fluidクラスにd-flexをつけたり、さらにその次ではd-flexの中にd-flex-inlineを使ったりなど、こういった入れ子的なことはやってもだいちょうぶなのでしょうか？
色々とごちゃごちゃしてしまい申し訳ありませんが、詳しい方ぜひご教授ください。

該当のソースコード

<!DOCTYPE html> <html> <head> <title> <%= full_title(yield(:title)) %></title> <%= csrf_meta_tags %>

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

</head> <body> <div class="container-fluid dflex nowrap"> <nav class="navbar navbar-expand-md navbar-light fixed-top p-1" style="background-color: #e3f2fd;">

  <%= link_to 'ブランドaaaaaaa', root_path, alt: 'サイトのロゴ',  class: "navbar-brand ml-4" %>
  <div class="d-flex flex-column">
    <span class="navbar-text font-weight-lighter" style="font-size: 10px;">
      登録不要！今がチャンス！
    </span>
    <div class="d-flex-inline">
        <%= link_to "会員登録なしで申し込む", "#", style: "font-size: 10px"  %>
        <%= link_to "ログイン", "#", class: "btn btn-primary" %>
        <%= link_to "新規登録", "#", class: "btn btn-primary" %>
    </div>

  </div>

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

  <div class="collapse navbar-collapse justify-content-sm-around" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item mx-2 <%= 'active' if current_page?(root_path) %>">
        <%= link_to(root_path, class: "nav-link") do %>TOP<%= (content_tag :span, "(current)", :class => "sr-only") if current_page?(root_path) %> <% end %>
      </li>
      <li class="nav-item mx-2 <%= 'active' if current_page?(main_pages_help_path) %>">
        <%= link_to(main_pages_help_path, class: "nav-link") do %>お問い合わせ<%= (content_tag :span, "(current)", :class => "sr-only") if current_page?(main_pages_help_path) %> <% end %>
      </li>
      <li class="nav-item mx-2">
        <%= link_to "キャンペーン情報", "#", class: "nav-link" %>
      </li>
    </ul>
  </div>
</nav>
</div>

<div class="container">
  <%= yield %>
</div>

</body> </html> ```ここに言語名を入力ソースコード


### 試したこと
一応、.d-flex .nowrap を持った親クラスをセットしたりしてみたのですが、変化なしです。
ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

自己解決

ブレークポイントごとにorder属性をつけることでうまくいきました。

erb
1<nav class="navbar navbar-expand-md navbar-light  fixed-top p-1" style="background-color: #e3f2fd;">  
2  
3  
4  <%= link_to 'ブランドaaaaaaa', root_path, alt: 'サイトのロゴ',  class: "navbar-brand ml-4" %>  
5  <div class="d-flex flex-column order-sm-1 order-md-2">  
6    <span class="navbar-text font-weight-lighter" style="font-size: 10px;">  
7      登録不要！今がチャンス！  
8    </span>  
9    <div class="d-flex-inline">  
10      <%= link_to "会員登録なしで申し込む", "#", style: "font-size: 10px"  %>  
11      <%= link_to "ログイン", "#", class: "btn btn-primary" %>  
12      <%= link_to "新規登録", "#", class: "btn btn-primary" %>  
13    </div>  
14    
15  </div>  
16  
17  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">  
18    <span class="navbar-toggler-icon"></span>  
19  </button>  
20  
21  <div class="collapse navbar-collapse order-sm-2 order-md-1" id="navbarNav">  
22    <ul class="navbar-nav">  
23      <li class="nav-item mx-2 <%= 'active' if current_page?(root_path) %>">  
24        <%= link_to(root_path, class: "nav-link") do %>TOP<%= (content_tag :span, "(current)", :class => "sr-only") if current_page?(root_path) %> <% end %>  
25      </li>  
26      <li class="nav-item mx-2 <%= 'active' if current_page?(main_pages_help_path) %>">  
27        <%= link_to(main_pages_help_path, class: "nav-link") do %>お問い合わせ<%= (content_tag :span, "(current)", :class => "sr-only") if current_page?(main_pages_help_path) %> <% end %>  
28      </li>  
29      <li class="nav-item mx-2">  
30        <%= link_to "キャンペーン情報", "#", class: "nav-link" %>  
31      </li>  
32    </ul>  
33  </div>  
34</nav>