Question

我正在为网站构建模板，它需要4列。在桌面模式下或平板电脑宽度以上的任何模式下，它应该显示所有4列，尽管外部2列仅用于填充。在移动模式下，外部2设置为消失，但是我需要中间两个颠倒它们的顺序。我尝试将'col-'设置设置为在480px以下时反转，但是它不起作用。我很感谢有人看着我的工作。

#create df where countries are split off
df = productsDF\
.withColumn("country_list",split(col("Countries_en"),","))\
.select(col("Product_name"), explode(col("country_list")).alias("Country"))\

#create count and filter out Country Belgium, Product Name can be changed as needed
countDF = df.groupBy("Product","Country").count()\
.filter(col("Country") !="Belgium")\
.filter(col('Product') == 'Café').show()

  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)

Answer 1

Bootstrap带有订购实用程序。通过将#printenv HOSTNAME=mylocalhostname jdbc_url=jdbc:postgresql://postgres.aws.com/dbname?ApplicationName=mylocalhostname jdbc_url_2=jdbc:postgresql://postgres.aws.com/dbname?ApplicationName=mylocalhostname jdbc_url_3=jdbc:postgresql://postgres.aws.com/dbname?ApplicationName=mylocalhostname jdbc_url_4=jdbc:postgresql://postgres.aws.com/dbname?ApplicationName=mylocalhostname附加到您的元素来进行尝试

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

媒体查询的Bootstrap列顺序遇到问题

1 个答案: