Ant Design小屏幕下如何反转Row组件的排列方向？

Ant Design的Row组件基于Flex布局实现，你可以通过响应式的Flex属性快速实现小屏幕下反转Col的排列顺序，以下是两种实用方案：

方案一：内联响应式样式直接实现 #

利用媒体查询针对小屏幕（对应Ant Design的xs断点，宽度≤575px），给Row动态设置flex-direction: row-reverse：

<Row 
  justify="space-between" 
  align='middle' 
  style={{ 
    height: "100%",
    // 小屏幕下反转排列方向
    "@media (max-width: 575px)": {
      flexDirection: "row-reverse"
    }
  }}
>
  <Col>
   <div className={Login.language}>
    <div className="glob_icon">
      <Image src='/images/language_icon.png' height={20} width={20} />
    </div>
    <div className={Login.select_language}>
      <Space>
        <Dropdown overlay={menu}>
          <Button ghost type='link' style={{ color: "white" }}>
              <Space>
                 Português
                 <DownOutlined />
              </Space>
          </Button>
        </Dropdown>
      </Space>
    </div>
   </div>
  </Col>
  <Col>
    <Text style={{ fontSize: "15px", color: "white" }}>@ 2022 SpyIdol</Text>
  </Col>
</Row>

调整后，小屏幕下版权文本会自动移到左侧，语言选择组件移到右侧，同时保留原有的space-between和middle对齐效果。

方案二：自定义CSS类实现（更优雅） #

如果觉得内联媒体查询不够整洁，可以定义单独的CSS类：

1. 编写CSS类（原生CSS/Less都适用） #

/* 原生CSS写法 */
@media (max-width: 575px) {
  .reverse-row-xs {
    flex-direction: row-reverse;
  }
}

/* Less/Sass写法 */
.reverse-row-xs {
  @media (max-width: 575px) {
    flex-direction: row-reverse;
  }
}

2. 给Row添加类名 #

<Row 
  justify="space-between" 
  align='middle' 
  style={{ height: "100%" }}
  className="reverse-row-xs"
>
  {/* 原有Col内容保持不变 */}
</Row>

额外提示 #

如果需要针对其他屏幕断点调整，只需修改媒体查询的max-width即可，对应Ant Design的官方断点：

• xs: 宽度<576px
• sm: 宽度<768px
• md: 宽度<992px
• lg: 宽度<1200px
• xl: 宽度<1600px

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