bootstrap 順番入替のorderが反応しない

前提・実現したいこと

８個のdivを並び替えたいです

スマフォ、タブレット、pc用に３画面を作成しています。

order-lg が正常に機能せず、５番目と６番目がなぜか入れ替わります。

表示させたいレイアウト順
１２３４
５６７８

現状
１２３４
６５７８

該当のソースコード

<div class="row">
          <div class="col-xs-2 col-sm-12 order-sm-1 col-lg-2 order-lg-1">あ</div>
          <div class="col-xs-2 col-sm-12 order-sm-3 col-lg-3 order-lg-2">い</div>
          <div class="col-xs-2 col-sm-12 order-sm-5 col-lg-3 order-lg-3">う</div>
          <div class="col-xs-2 col-sm-12 order-sm-7 col-lg-4 order-lg-4">え</div>

          <div class="col-xs-2 col-sm-12 order-sm-2 col-lg-2 order-lg-5"><input type="text"></div>
          <div class="col-xs-2 col-sm-12 order-sm-4 col-lg-3 order-lg-6"><input type="text"></div>
          <div class="col-xs-2 col-sm-12 order-sm-6 col-lg-3 order-lg-7"><input type="text"></div>
          <div class="col-xs-2 col-sm-12 order-sm-8 col-lg-4 order-lg-8"><input type="text"></div>
        </div>

試したこと

検証ツールで確認してみると、なぜか上から６番目だけ order-sm-4が適応されています

画面幅を sm〜lgまで色々変えてみても、ずっと order-sm-4 が効いています

ちなみにこちらは無理矢理解決したのですが、smサイズではなぜか6,7,8が反応しなかったので

@media screen and (min-width: 576px){
  .order-sm-6{
    order: 6!important;
  }
  .order-sm-7{
    order: 7!important;
  }
  .order-sm-8{
    order: 8!important;
  }
}

こちらで無理矢理適応させました。

lgサイズではなぜかsmサイズのorderが反応しているため、CSSで設定する力技でも解決できずに困っています。
よろしくお願い致します。

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

回答1件

ベストアンサー

Bootstrap 4.6.0 でやってみましたが、再現しませんね。
https://codepen.io/mather314/pen/ExZEarB

追記

「画面が小さくなったときにラベルとフォームが縦に並んだ関係を維持したい」という要望だと思うので、単純に組み合わせごとに一つのブロックにすれば良いと思います。（スペース等の調整は特にしていないので表示はぶれてますが）

html
1<div class="row">
2  <div class="col-12 col-lg-2">
3    <p>あ</p>
4    <div><input type="text" value="5"></div>
5  </div>
6  <div class="col-12 col-lg-3">
7    <p>い</p>
8    <div><input type="text" value="6"></div>
9  </div>
10  <div class="col-12 col-lg-3">
11    <p>う</p>
12    <div><input type="text" value="7"></div>
13  </div>
14  <div class="col-12 col-lg-4">
15    <p>え</p>
16    <div><input type="text" value="8"></div>
17  </div>
18</div>