ヘッダーの横表示されているメニューを、画面幅がある一定のサイズになったら縦に上から並べて表示したい

ホームページを作成しているのですが、画面縮小時にヘッダーの横表示されているメニューを、画面幅がある一定のサイズになったら縦に上から並べて表示したいです。

【現状】
画面サイズを縮小していくと、一段ずつ切り替わってしまいます。
（最初にログイン：が基本情報の下にきて、その次に最終ログイン日時：、最終的に上から書いたとおりの順番で表示される）
【やりたいこと】
画面サイズを縮小したときに、左側にあるサイドメニューがパッと表示されなくなって、同時にヘッダーのメニューがいっきに縦積み表示になるようにしたい。

●縮小されていない時

●画面が縮小された時

【使用しているもの】
●CSS
●html
●bootstrap4
●angular4
●typescript

参考にしているサンプルはこちら↓
https://getbootstrap.com/docs/4.0/examples/dashboard/

宜しくお願いします。

↓↓実際に書いたもの↓↓

html
1<header class="navbar navbar-light sticky-top bg-light flex-md-nowrap p-0 border-bottom">
2  <nav class="w-100 nav-justified navbar navbar-expand-lg header-style">
3
4    <a class="navbar-brand title-size title-font-size col-sm-3 col-md-2 mr-0" [routerLink]="　
5['./']">基本情報</a>
6
7    <ul class="navbar-nav mr-auto px-3">
8      <li class="nav-item text-nowrap ">
9        <a class="nav-link" role="button" (click)="openModal()">
10          ID：
11          <span class="text-primary">{{this.nameID}} </span>
12          <i class="fa fa-search fa-fw" aria-hidden="true"></i>
13        </a>
14      </li>
15    </ul>
16
17    <ul class="nav ml-auto">
18      <li class="nav-item px-2 text-nowrap ">
19        <span class="navbar-text">
20          ログイン：
21          <span class="text-primary">{{this.userName}}</span>さん
22        </span>
23      </li>
24
25      <li class="nav-item px-2 text-nowrap ">
26        <span class="navbar-text">
27          最終ログイン日時：
28          <span class="text-primary">{{this.lastLoginTime | date:"medium"}}</span>
29        </span>
30      </li>
31    </ul>
32
33    <ul class="navbar-nav px-3">
34      <li class="nav-item text-nowrap ">
35        <a class="nav-link" (click)="logout()">
36          <i class="fa fa-sign-out" aria-hidden="true"></i> ログアウト
37        </a>
38      </li>
39    </ul>
40　 </nav>
41</header>
42

css
1.main-margin-bottom {
2  margin-bottom: 52px;
3}
4
5.nav-margin-top {
6  margin-top: 48px;
7}
8
9.title-size{
10  min-width: 180px;
11  min-height: 21px;
12}
13
14.title-font-size{
15  font-size: 23px;
16}
17
18.header-style{
19  padding-top: 0px !important;
20  padding-bottom: 0px !important;
21  padding-left: 0px !important;
22  padding-right: 1.5px !important;
23}

m.ts10806

2018/07/06 02:22

このままでは丸投げ質問（非推奨質問の代表格です）となってしまうので、自身が調べていく中でやってみたコードをご提示ください。その上で「何が」「どう」分からなかったのか記載してください。 https://teratail.com/help/question-tips

m.ts10806

2018/07/06 02:22

「うまく動作しない」「うまくいかない」では何が起きているか伝わりません。「○○のようになるはずなのに××となってしまう」のような形で「ゴール」と「現象（エラーメッセージなども含む）」を明確にしてください。https://teratail.com/help/question-tips#questionTips3-4-1

miupi

2018/07/06 02:36

ご指摘ありがとうございます。ソースと現象を追記しました

m.ts10806

2018/07/06 02:45

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

miupi

2018/07/06 04:06

修正しました。エラーは出ていません。