我有下表：

<table class="table table-sm table-borderless w-auto">
  <thead>
    <tr>
        <th>
          <input type="checkbox" value="false" class="form-check-input" />
        </th>
        <th>#</th>
        <th>Customer</th>
        <th>Date</th>
        <th>Channel</th>
        <th>Status</th>
        <th class="d-none d-sm-none d-md-block d-lg-block d-xl-block d-xxl-block">Payment</th>
        <th class="d-none d-sm-none d-md-block d-lg-block d-xl-block d-xxl-block">Summary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="checkbox" value="false" class="form-check-input" />
        </td>
        <td>24334</td>
        <td>Customer X</td>
        <td><time datetime="2022-08-06T10:32">28.08.22 - 10:32</time></td>
        <td>POS</td>
        <td>Received
        </td>
        <td class="d-none d-sm-none d-md-block d-lg-block d-xl-block d-xxl-block">Cash</td>
        <td class="d-none d-sm-none d-md-block d-lg-block d-xl-block d-xxl-block">4 products = $123.45</td>
      </tr>
    </tbody>
  </table>

从上面的代码中可以看出，我试图在小屏幕上隐藏Payment和Summary列。但是这个行为有点“bug”。当页面最初加载到md或更大的屏幕上时，这两列都是可见的，但是它们出现在另一列的顶部。同样的情况也适用于td内容。请看下面的截图：

同样的情况也适用于span标签。我有三个按钮，上面有字体很棒的图标和图标旁边的文本。下面的代码，

<button type="button" class="btn">
      <i class="fa fa-search"></i> <span>Detailed Search</span>
    </button>

产生以下结果：

但是，一旦我将d-none d-sm-none d-md-block d-lg-block d-xl-block d-xxl-block应用于span元素，外观就变成如下所示。

将block替换为inline可以解决按钮的问题，但是，当应用于th和td标记时，元素存在对齐问题。

指令集

除了用hidden代替none来隐藏元素之外，我想不出还有什么别的办法，但是行为也没有改变。任何帮助都将不胜感激。