bootstrap4のフォームとボタンがズレてしまいます。【レイアウト】

前提・実現したいこと

bootstrap4でコーディングしたwebページを
ウィンドウ画面（sm以下）を最小にした時に、
フォームとボタンがズレることなく表示できる様にしたいです。

発生している問題

下記の画像の様に画面を最小(sm以下)にすると
それまでフォームとボタンが綺麗に横並びになっているのに、
なぜかレイアウトが崩れてしまい、フォームとボタンが突如ズレてしまいます。

該当のソースコード

html
1<!doctype html>
2<html lang="ja">
3<head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7    <!-- Bootstrap CSS -->
8    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
9          integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
10    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
11    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
12    <title>Freelanze - Topページ</title>
13</head>
14<body>
15
16<!-- ナビバーデザインテストー -->
17<nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
18    <div class="row">
19        <div class="col-4 col-sm-4 order-md-0">
20            <a class="navbar-brand" href="/">ほげほげ</a>
21            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
22                <span class="navbar-toggler-icon"></span>
23            </button>
24        </div>
25        <div class="col-8 col-sm-8 order-md-3">
26
27                <button type="button" class="btn btn-primary">テスト</button>
28                <button type="button" class="btn btn-primary">ログイン</button>
29                <button type="button" class="btn btn-primary">会員登録</button>
30
31        </div>
32        <div class="col-12 col-sm-8 order-md-1">
33            <form class="form-inline my-2 my-lg-0" action="/search" method="get" accept-charset="utf-8">
34                <div class="form-group">
35                <input type="search" class="form-control mr-sm-2" placeholder="キーワードで検索" name="q" aria-label="検索...">
36                </div>
37                <button type="submit" class="btn btn-outline-info my-2 my-sm-0">検索</button>
38            </form>
39        </div>
40        <div class="col-sm-4 order-md-2">
41            <button type="button" class="btn btn-primary">カテゴリー</button>
42        </div>
43    </div>
44</nav>
45
46<!-- top画像ー -->
47<img class="img-fluid" src="/media/freelanze-top-image.png" style="margin-top: 55px">
48
49<main>
50<!-- メインコンテンツ -->
51<div class="container mt-auto"></div>
52</main>
53
54    <!-- Optional JavaScript -->
55    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
56    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
57            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
58            crossorigin="anonymous"></script>
59    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
60            integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
61            crossorigin="anonymous"></script>
62    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
63            integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
64            crossorigin="anonymous"></script>
65</body>
66</html>