PC端网站适配移动端：能否用CSS Media Query调整元素结构？

当然可以！你完全不需要修改HTML结构，借助CSS3的Flexbox或者Grid布局，就能轻松实现这种元素顺序的调换，完美适配移动端的布局需求。下面给你具体的解决方案和适配你代码的示例：

核心方案：使用Flexbox的order属性 #

这是处理这类顺序调换需求最简洁高效的方法，原理是给父容器设置弹性布局，然后通过order属性控制子元素的显示顺序：

1. 第一步：给需要调换顺序的元素添加父容器
   先把你的欢迎文本和表单表格包裹在一个统一的容器里，这样我们才能用Flexbox控制它们的顺序：

   <div class="layout-container">
     <!-- 欢迎文本（PC端在前） -->
     <center><h1 style="color: red;">
       <?php echo "bienvenue $nom $prenom votre identifiant est $id"; ?>
     </h1></center>
     <!-- 表单表格（PC端在后） -->
     <table border="1" cellspacing="2" cellpadding="2">
       <tr>
         <td>Identifiant</td>
         <td><input type="text" name="T0"></td>
       </tr>
       <tr>
         <td>nom</td>
         <td><input type="text" name="T1"></td>
       </tr>
       <tr>
         <td>prenom</td>
         <td><input type="text" name="T2"></td>
       </tr>
     </table>
   </div>
   

2. 第二步：添加CSS媒体查询控制顺序
   给容器设置Flex布局，然后在移动端媒体查询里调整两个元素的order值：

   /* 默认PC端样式：保持文本在前、表格在后的顺序 */
   .layout-container {
     display: flex;
     flex-direction: column;
     gap: 1rem; /* 给元素之间加些间距，优化视觉体验 */
   }
   
   /* 移动端适配（这里以屏幕宽度≤768px为例，可根据需求调整阈值） */
   @media (max-width: 768px) {
     /* 调换顺序：表格在前，文本在后 */
     .layout-container table {
       order: 1;
     }
     .layout-container h1 {
       order: 2;
     }
   }
   

补充说明 #

• 这种方法只是视觉上的顺序调整，DOM结构本身并没有改变。如果你的页面需要考虑无障碍访问（比如屏幕阅读器），需要注意：辅助工具会按照原始DOM顺序读取内容，若这会影响用户体验，可能需要结合实际情况权衡是否修改HTML。
• 除了Flexbox，Grid布局也能实现类似效果，但对于这种简单的上下顺序调换，Flexbox的写法更简洁直观。

把上述代码整合到你的页面中，就能实现你想要的PC端和移动端布局顺序切换啦！

内容的提问来源于stack exchange，提问作者John Robot