CSS表固定不同屏幕尺寸上的列更改位置

是通过CSS媒体查询和弹性布局来实现的。

媒体查询是一种CSS技术，它允许根据设备的特性（如屏幕尺寸、分辨率、方向等）应用不同的样式。通过使用媒体查询，可以根据不同的屏幕尺寸调整列的位置。

弹性布局（Flexbox）是一种CSS布局模型，它提供了灵活的方式来排列和对齐元素。通过使用弹性布局，可以轻松地调整列的位置和大小，以适应不同的屏幕尺寸。

下面是一个示例代码，展示如何使用媒体查询和弹性布局来固定不同屏幕尺寸上的列位置：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }
    
    .column {
      flex: 1;
      padding: 10px;
    }
    
    @media screen and (max-width: 600px) {
      .column {
        flex-basis: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
  </div>
</body>
</html>

在上面的代码中，.container是一个包含列的容器，.column是每个列的样式。通过设置display: flex和flex-wrap: wrap，容器中的列将按照弹性布局进行排列。

在媒体查询中，使用@media关键字指定了一个屏幕尺寸范围（这里是600px）。当屏幕宽度小于等于600px时，.column的flex-basis属性被设置为100%，使每个列占据整个容器的宽度，从而实现列的位置更改。

这种方法可以适应不同屏幕尺寸上的列位置变化，使页面在不同设备上都能够良好地显示。

腾讯云相关产品和产品介绍链接地址：