我已经建立了一个会议网站：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 {}
}我已经复制了您网站的重要部分来演示。
您可以使用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>我不确定你能编辑多少，因为我上次使用它已经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 */
}