Html 重新排序网站上表格的列

我已设置会议网站：

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

非常感谢您的帮助

下面是index.html中的

@媒体

代码。“sites36f3.css”中有159个

@media

条目

@媒体屏幕和（最小宽度：767px）{
.wsite元素.wsite not页脚：not（.wsite页眉元素）div.paragration，
.wsite元素.wsite not页脚：not（.wsite页眉元素）p，
.wsite元素.wsite not页脚：not（.wsite页眉元素）。产品块。产品标题，
.wsite元素。wsite not页脚：not（.wsite页眉元素）。产品说明，
.wsite元素.wsite not页脚：not（.wsite页眉元素）.wsite表单字段标签，
.wsite元素.wsite not页脚：not（.wsite页眉元素）.wsite表单字段标签，
#wsite内容分类段落，
#wsite内容p，
#wsite内容。产品块。产品标题，
#wsite内容。产品说明，
#wsite content.wsite表单字段标签，
#wsite content.wsite表单字段标签，
.blog侧边栏部分段落，
.blog侧边栏p，
.blog侧栏.wsite表单字段标签，
.blog侧栏.wsite表单字段标签{}
#wsite内容分类段落，
#wsite内容p，
#wsite内容。产品块。产品标题，
#wsite内容。产品说明，
#wsite content.wsite表单字段标签，
#wsite content.wsite表单字段标签，
.blog侧边栏部分段落，
.blog侧边栏p，
.blog侧栏.wsite表单字段标签，
.blog侧栏.wsite表单字段标签{}
.wsite-elements.wsite-footer分区段落，
.wsite-elements.wsite-footer p，
.wsite-elements.wsite-footer.product block.product title，
.wsite-elements.wsite-footer.product description，
.wsite-elements.wsite-footer.wsite表单字段标签，
.wsite-elements.wsite-footer.wsite表单字段标签{}
.wsite元素.wsite not页脚：not（.wsite页眉元素）h2，
.wsite元素.wsite not页脚：not（.wsite页眉元素）.product long.product title，
.wsite元素.wsite not页脚：not（.wsite页眉元素）。产品大。产品标题，
.wsite元素.wsite not页脚：not（.wsite页眉元素）.product small.product title，
#wsite含量h2，
#wsite content.product long.product title，
#wsite内容。产品大。产品名称，
#wsite内容。产品小型。产品名称，
.blog侧栏h2{}
#wsite含量h2，
#wsite content.product long.product title，
#wsite内容。产品大。产品名称，
#wsite内容。产品小型。产品名称，
.blog侧栏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{}
#网站名称{
字体大小：30px！重要；
}
.wsite菜单默认值a{
字体大小：13px！重要；
}
.wsite菜单a{}
.wsite图像分区，
.wsite标题{}
.GalleryCaptionInerText{}
.fancybox标题{}
.wslide标题文本{}
.wsite电话{}
.wsite标题，
.wsite头节.wsite内容标题{}
.wsite标题段，
.wsite头节.段落{}
.wsite按钮内部{}
.wsite不是页脚块引号{}
.wsite页脚块引号{}
.blog头h2 a{}
#wsite内容h2.wsite-product-title{}
.wsite产品.wsite产品价格a{}
}

我复制了您网站的重要部分来演示

您可以使用

display:flex

对列进行重新排序，还可以为子元素设置

顺序

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

您可以从这里了解更多信息：

此外，我想引用上面的链接提醒大家：

订单属性和可访问性

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

通过在本页上的任何一个实例上进行切换，您可以看到order如何为不使用某种定点设备的任何人创造一种奇怪的体验。要了解更多关于视觉顺序和逻辑顺序的这种分离以及它为可访问性带来的一些潜在问题，请参阅以下参考资料


.flex{
显示器：flex；
}
.flex:n个孩子（1）{
顺序：3；
}
.flex:n个孩子（2）{
顺序：1；
}
.flex:n个孩子（3）{
顺序：2；
}
.wsite多色表{
位置：相对位置；
边界塌陷：塌陷；
表布局：固定；
宽度：100%；
边距：0！重要；
边界：0！重要；
填充：0！重要；
}
t车身{
显示：表格行组；
垂直对齐：中间对齐；
边框颜色：继承；
}
tr{
显示：表格行；
垂直对齐：继承；
边框颜色：继承；
}
.wsite多色彩颜色{
垂直对齐：顶部；
边距：0！重要；
边界：0！重要；
填充：0；
-moz框大小：边框框；
}

第1列
内容
第2列
更多内容
第3栏
其他内容
如果您运行的是纯html页面，而没有进行排序的后端。您可以在这里找到帮助：这与排序无关。我知道CSS中的“wsite multicl table”功能将使中间单元格首先在移动设备中显示。不幸的是，我无法理解。好吧，我刚看过你的照片