如何使用Flexbox实现底部图片与文本的反转？

核心问题出在CSS选择器的写法上：

你写的 .full-width-two-column .reversed 表示选择.full-width-two-column元素内部的.reversed子元素，但实际你的HTML里.reversed是和.full-width-two-column绑定在同一个div上的（<div class="full-width-two-column reversed">），正确的选择器应该是没有空格的复合选择器：.full-width-two-column.reversed。

修正后的CSS代码：

@media screen and (min-width: 768px){
    .full-width-two-column {
        height: 100vh;
        display: flex;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: stretch;
        row-gap: 1.618rem;
    }

    /* 修正选择器：去掉空格，匹配同时拥有两个类的元素 */
    .full-width-two-column.reversed {
        flex-direction: row-reverse;
    }

    .full-width-two-column .image,
    .full-width-two-column .content-holder {
        display: flex;
    }

    .full-width-two-column .image {
        aspect-ratio: auto;
        background-color: #dadada;
        flex: 0 0 50%;
    }

    .full-width-two-column .content-holder {
        padding: 1.618rem;
        display: flex;
        align-items: center;
    }

    .full-width-two-column .content-holder .content {
        max-width: 20rem;
    }
}

解释下为什么之前的写法无效：

• 带空格的选择器是后代选择器，会找父元素下的子元素，但你的.reversed不是子元素，是当前元素的另一个类。
• 复合选择器（无空格）表示同时拥有这两个类的元素，这样flex-direction: row-reverse才会作用到正确的flex容器上，实现图片和文本列的反转。

这样修改后，第二个.full-width-two-column容器就会自动把内部的image和content-holder调换顺序，达到你要的反转效果。

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