网站上表格列的重新排序

Question

我已经建立了一个会议网站：http://www.nzbcs.org.nz/index.html。

但我不知道如何使它在移动设备上以不同的顺序显示，即首先是中心列，然后是左右列。

非常感谢任何帮助。

下面是 index.html 中的@media 代码。 “sites36f3.css”中有 159 个@media 条目。

@media screen and (min-width: 767px) {
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) div.paragraph,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) p,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-block .product-title,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-description,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .wsite-form-field label,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .wsite-form-field label,
    #wsite-content div.paragraph,
    #wsite-content p,
    #wsite-content .product-block .product-title,
    #wsite-content .product-description,
    #wsite-content .wsite-form-field label,
    #wsite-content .wsite-form-field label,
    .blog-sidebar div.paragraph,
    .blog-sidebar p,
    .blog-sidebar .wsite-form-field label,
    .blog-sidebar .wsite-form-field label {}
    #wsite-content div.paragraph,
    #wsite-content p,
    #wsite-content .product-block .product-title,
    #wsite-content .product-description,
    #wsite-content .wsite-form-field label,
    #wsite-content .wsite-form-field label,
    .blog-sidebar div.paragraph,
    .blog-sidebar p,
    .blog-sidebar .wsite-form-field label,
    .blog-sidebar .wsite-form-field label {}
    .wsite-elements.wsite-footer div.paragraph,
    .wsite-elements.wsite-footer p,
    .wsite-elements.wsite-footer .product-block .product-title,
    .wsite-elements.wsite-footer .product-description,
    .wsite-elements.wsite-footer .wsite-form-field label,
    .wsite-elements.wsite-footer .wsite-form-field label {}
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) h2,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-long .product-title,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-large .product-title,
    .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-small .product-title,
    #wsite-content h2,
    #wsite-content .product-long .product-title,
    #wsite-content .product-large .product-title,
    #wsite-content .product-small .product-title,
    .blog-sidebar h2 {}
    #wsite-content h2,
    #wsite-content .product-long .product-title,
    #wsite-content .product-large .product-title,
    #wsite-content .product-small .product-title,
    .blog-sidebar h2 {}
    .wsite-elements.wsite-footer h2,
    .wsite-elements.wsite-footer .product-long .product-title,
    .wsite-elements.wsite-footer .product-large .product-title,
    .wsite-elements.wsite-footer .product-small .product-title {}
    #wsite-title {
        font-size: 30px !important;
    }
    .wsite-menu-default a {
        font-size: 13px !important;
    }
    .wsite-menu a {}
    .wsite-image div,
    .wsite-caption {}
    .galleryCaptionInnerText {}
    .fancybox-title {}
    .wslide-caption-text {}
    .wsite-phone {}
    .wsite-headline,
    .wsite-header-section .wsite-content-title {}
    .wsite-headline-paragraph,
    .wsite-header-section .paragraph {}
    .wsite-button-inner {}
    .wsite-not-footer blockquote {}
    .wsite-footer blockquote {}
    .blog-header h2 a {}
    #wsite-content h2.wsite-product-title {}
    .wsite-product .wsite-product-price a {}
}

Answer 1

我已经复制了您网站的基本部分来演示。

您可以使用display: flex 对列进行重新排序，还可以为子元素设置order。

下面的示例重新排列 HTML 的布局列。

您可以从这里了解更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

另外，我想通过引用上面的链接来警告：

订单属性和可访问性

使用order 属性对可访问性的影响与使用flex-direction 改变方向的含义完全相同。使用order 更改项目的绘制顺序，以及它们在视觉上出现的顺序。它不会更改项目的顺序导航顺序。因此，如果用户在项目之间切换，他们可能会发现自己以一种非常混乱的方式在您的布局中跳跃。

通过浏览此页面上的任何实时示例，您可以看到秩序如何为不使用某种指点设备的人创造一种奇怪的体验。要详细了解这种视觉顺序和逻辑顺序的脱节以及它为可访问性带来的一些潜在问题，请参阅以下资源。

.flex {
  display: flex;
}

.flex :nth-child(1) {
  order: 3;
}

.flex :nth-child(2) {
  order: 1;
}

.flex :nth-child(3) {
  order: 2;
}

.wsite-multicol-table {
  position: relative;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

.wsite-multicol-col {
  vertical-align: top;
  margin: 0 !important;
  border: 0 !important;
  padding: 0;
  -moz-box-sizing: border-box;
}

<table class="wsite-multicol-table">
  <tbody class="wsite-multicol-tbody">
    <tr class="wsite-multicol-tr flex">
      <td class="wsite-multicol-col" style="width:22.666666666667%;padding:0 15px;order: 10;">column 1<br>stuff</td>
      <td class="wsite-multicol-col" style="width:56.816326530612%;padding:0 15px;order: 0;">column 2<br>more stuff</td>
      <td class="wsite-multicol-col" style="width:20.517006802721%; padding:0 15px;">column 3<br>other stuff</td>
    </tr>
  </tbody>
</table>

我不确定你可以在 weebly 中编辑多少，因为我上次使用它已经 5 年多了。

此外，如果您想在移动设备上以不同方式显示，您可能需要使用 CSS 媒体查询，通常使用 @media 声明。 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

对于媒体查询，通常我们通过屏幕大小来控制，来源：https://stackoverflow.com/a/16443861/498031

@media only screen and (min-width: 768px) {
    /* tablets and desktop */
}

@media only screen and (max-width: 767px) {
    /* phones */
  .flex {
    ...
  }
  .flex :nth-child(n) {
    ...
  }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}