媒体查询的Bootstrap列顺序有问题

Question

我正在建立一个网站的模板，它需要4列。在桌面模式下，或者平板电脑宽度以上的任何东西中，它应该显示所有4列，尽管外部2列仅用于填充。在移动模式下，外部2被设置为消失，但我需要中间的2来颠倒它们的顺序。我试着在低于480px的时候将'col-‘设置为反转，但它不起作用。如果有人帮我检查一下我的作品，我会很感激的。

  HTML

    <div id="inus1" class="fk-row row">
  <div data-text="text" align="center" id="inyb3" class="fk-col order-1">
  </div>
  <div align="center" id="i80rh" class="fk-col order-2 order-xs-2">
    <div id="ifo6l">
      <div id="iq1zf" class="fk-headline">Thank you for your purchase!
      </div>
      <div data-text="text" id="ihleo">Order {{orderId}}
        <div draggable="true" id="i6myy-2-2">
          <div draggable="true" id="ii502-2-2-2">
            <b data-text="text">
              <span data-text="text" id="ix3j4">Thank you {{firstName}} {{lastName}}!</span>
            </b>
          </div>
        </div>
      </div>
    </div>
    <iframe frameborder="0" type="map" name="map" address="" zoom="1" maptype="q" id="in2gu" src="https://maps.google.com/maps?&amp;z=1&amp;t=q&amp;output=embed"></iframe>
  </div>
  <div align="center" id="i33dp" class="fk-col order-3 order-xs-1">
    <table id="orderSummaryTable" class="w-100">
      <thead id="iweztk">
        <tr id="ikyi1h">
          <th colspan="3" id="i10uii">
            <span data-text="text" id="iqvl9r">Order Summary</span>
          </th>
        </tr>
        <tr id="ieggiv">
          <th id="inwrj">
            <span data-text="text" id="ipokfh">Item</span>
          </th>
          <th id="i259c">
            <span data-text="text" id="i5gfso">Quantity</span>
          </th>
        </tr>
      </thead>
      <tbody id="items-list">
        <tr>
          <td class="cell cell-items-list">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div align="center" id="ijiyf" class="fk-col order-4">
  </div>
</div>

  CSS (just the media query)

    @media (max-width: 480px){
  #in2gu{
    width:615px;
    height:350px;
  }
  #i80rh{
    width:100%;
  }
  #i33dp{
    width:100%;
  }
  #inyb3{
    display:none;
  }
  #ijiyf{
    display:none;
  }
  #in2gu{
    width:615px;
    height:350px;
  }
}

Answer 1

Bootstrap附带了排序实用程序。通过将order-0, order1, etc.附加到您的元素来尝试它们

https://getbootstrap.com/docs/4.0/utilities/flex/#order