Bootstrapでウィンドウを左右最小にするとレイアウトが重なってしまう

前提・実現したいこと

PHPで日記を記録するシステムを作っています。
画像のアップロードのレイアウトを実装中に以下の不具合が発生しました。
ウィンドウを左右狭めていくと左右のレイアウトが重なって表示されてしまいます。

発生している問題

該当のソースコード

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>みんなの日記帳</title>
  </head>
  <body>
    <!--ユーザーアイコンを右上に配置-->
    <div class="fixed-top" style="left:initial;">
      <p>アップロードするアイコンを指定してください。</p>
      <form action="upload-output.php" method="post" enctype="multipart/form-data">
        <p><input type="file" name="file" class="btn btn-primary pull-right"></p>
        <p><input type="submit" value="アップロード" class="btn btn-primary pull-right"></p>
        <!--新規作成ボタンを右上に配置-->
        <button type="submit" class="btn btn-primary pull-right">新規作成</button>
      </form>
    </div>
      <div class="row col-2">
        <div class="accordion" id="accordionExample">
          <div class="card">
            <div class="card-header" id="headingOne">
              <h5 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  Collapsible Group Item #1
                </button>
              </h5>
            </div>

            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
              <div class="card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="headingTwo">
              <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  Collapsible Group Item #2
                </button>
              </h5>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
              <div class="card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="headingThree">
              <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  Collapsible Group Item #3
                </button>
              </h5>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
              <div class="card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
        </div>
      </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  </body>
</html>

試したこと

左のレイアウトを下記のようにしてレイヤーを同列にしようとしましたが、今度は左のレイアウトが上に来るようになってしまいました。良い解決方法はありますでしょうか？

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

エディタ：Brakets

m.ts10806

2018/09/24 23:06 編集

直接の回答ではないのでこちらにコメントします。前回質問（ https://teratail.com/questions/148276 ）で「あまりいい解決策ではない」という主旨の補足を入れていましたが、こうなることを懸念してのことです。あくまで「右上にある要素を固定するため」だけの解決策に過ぎません。fixed-topの指定内容は確認されましたか？その内容を確認されたのであればこうなることは分かるかと思います。もしレスポンシブで2カラム→1カラムを実現したいのであればcontainer→row→colの関係性を理解し、グリッドレイアウトをきちんとおさえないといけません。そういった意味でリファレンスの確認をお願いしていました。

1004

2018/09/24 23:30

度々、ご回答いただき有難うございます。まずはグリッドレイアウトの確認からしていきたいと思います。有難うございます。

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

回答1件

ベストアンサー

HTML
1<div class="container-fluid">
2  <div class="row flex-md-row-reverse">
3    <div class="col-md">
4      <!-- 略 -->
5    </div>
6    <div class="col-md row">
7      <!-- 略 -->
8    </div>
9  </div>
10</div>