Flex布局需求：实现文本与视频的双列分栏排列

需求：将.col-1、.col-3、.col-5（文本元素）在左侧列上下排列，.col-2、.col-4（视频元素）在右侧列上下排列，但现有CSS未实现双列效果。

原代码问题分析 #

你之前的CSS错误在于给.row设置了flex-direction: column，这会强制所有子元素垂直堆叠，无法形成横向双列；order属性只能调整垂直排列的顺序，不能将元素分配到左右两列。

解决方案（基于Flexbox实现） #

要实现双列布局，需要把.row改成横向排列的Flex容器，同时开启换行，再给文本、视频元素分别指定宽度占比，配合order让同类元素归到同一列：

修改后的CSS代码 #

section.cta-video .row{
    display: flex;
    flex-wrap: wrap; /* 元素超出宽度时自动换行 */
}

/* 文本元素：占左半列，统一order值让它们先排列 */
section.cta-video .row .col-1, 
section.cta-video .row .col-3, 
section.cta-video .row .col-5 {
    width: 50%;
    order: 1;
}

/* 视频元素：占右半列，后排列 */
section.cta-video .row .col-2, 
section.cta-video .row .col-4 {
    width: 50%;
    order: 2;
}

效果说明 #

• flex-wrap: wrap允许子元素在容器宽度不足时换行
• 所有文本元素宽度设为50%，order:1会让它们优先填满左列的所有行
• 视频元素同样占50%宽度，order:2会在左列填满后，自动排列到右列的对应行

这样就能实现文本左列、视频右列的双列布局，完全符合需求。

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