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

Question

前提・実現したいこと

８個の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で設定する力技でも解決できずに困っています。
よろしくお願い致します。

Answer 1

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

追記

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

<div class="row">
  <div class="col-12 col-lg-2">
    <p>あ</p>
    <div><input type="text" value="5"></div>
  </div>
  <div class="col-12 col-lg-3">
    <p>い</p>
    <div><input type="text" value="6"></div>
  </div>
  <div class="col-12 col-lg-3">
    <p>う</p>
    <div><input type="text" value="7"></div>
  </div>
  <div class="col-12 col-lg-4">
    <p>え</p>
    <div><input type="text" value="8"></div>
  </div>
</div>

https://codepen.io/mather314/pen/mdRxmzX

Comments

[退会済みユーザー]

確認していただき、ありがとうございます。

orderが効かない場合、他の対処法などはありますでしょうか？

[mather]

追記しました。
ちなみに、 col-xs-2 などのような xs 指定はありませんのでご注意ください。
https://getbootstrap.jp/docs/4.2/layout/grid/