一般不可能做到。但可以做到防護。
當偵察到直立時。用一個畫面請用戶轉成橫式才能使用。

一般要強制橫式的話。web比較難直接做到。畢竟受限於瀏覽器app的控制。
只能利用web app這一類的東西才有可能辦到了。

您可以畫兩個
然後依據目前的螢幕寬度(直看、橫看)
調整哪個顯示，哪個隱藏
^.^a

用 bootstrap 可以做到
只要需要設定 d-*-block d-none 就能達成你要的顯示方式
但這樣設定又要去判斷是不是第一個元素
我會傾向另外自己設定一個顯示的 class 斷點設定跟 bootstrap 一樣就好

<ul class="list-unstyled">
  <li class="row no-gutters flex-sm-row flex-column ctm-table">
    <div class="col-sm-2 col ctm-table-title">
      <ul class="list-unstyled d-sm-block d-flex">
        <li class="col border">訂單</li>
        <li class="col border">項次</li>
        <li class="col border">品號</li>
        <li class="col border">數量</li>
      </ul>
    </div>
    <div class="col-sm-2 col">
      <ul class="list-unstyled text-sm-right d-sm-block d-flex">
        <li class="col border">A001</li>
        <li class="col border">1</li>
        <li class="col border">X2124</li>
        <li class="col border">4</li>
      </ul>
    </div>
  </li>
  <li class="row no-gutters flex-sm-row flex-column ctm-table">
    <div class="col-sm-2 col ctm-table-title">
      <ul class="list-unstyled d-sm-block d-flex">
        <li class="col border">訂單</li>
        <li class="col border">項次</li>
        <li class="col border">品號</li>
        <li class="col border">數量</li>
      </ul>
    </div>
    <div class="col-sm-2 col">
      <ul class="list-unstyled text-sm-right d-sm-block d-flex">
        <li class="col border">A001</li>
        <li class="col border">2</li>
        <li class="col border">DDDD</li>
        <li class="col border">2</li>
      </ul>
    </div>
  </li>
</ul>

/* scss */
@mixin sm {
  @media screen and (max-width: 576px) {
    @content;
  }
}

.ctm-table {
  &:not(:first-of-type) {
    & .ctm-table-title {
      @include sm {
        display: none;
      }
    }
  }
}

/* css */
@media screen and (max-width: 576px) {
  .ctm-table:not(:first-of-type) .ctm-table-title {
    display: none;
  }
}

demo