How do I make this bottom image and text reverse vertically with flexbox?-CodePudding

Please excuse any errors on my first post.

I'm currently stumped on how to make the bottom image and textbox reverse using flexbox. This image is what I'm trying to acheieve.

I've tried using flex-direction: row-reverse under the .reversed selector, but nothing is budging. The style column-reverse doesn't seem to work either, and I tried it under all the selectors and still, nothing is changing. Here are my lines of code for 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 {
        display: flex;
        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;
    }
}

And for HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <h2>Title</h2>
        <div >
            <div >
                Image
            </div>
            <div >
                <div >
                    <h3>Lorem Ipsum</h3>
                    <p>Aenean quis lacinia nisi...</p>
                </div>
            </div>
        </div>
        <div >
            <div >
                Image
            </div>
            <div >
                <div >
                    <h3>Lorem Ipsum</h3>
                    <p>Lorem ipsum dolor sit amet... </p>
                </div>
            </div>
        </div>

        <div id="windowSize"></div>

        <script src="js/app.js"></script>
    </body>
</html>

Please help me understand this better! Thank you so much in advance!

CodePudding user response：

Here Flex Box style is used :

 .row {
        display: flex;
        flex-wrap: wrap;
        background-color: tomato;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .col {
        width: 35%;
        height: 45vh;
        background-color: yellow;
        margin: 1%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
</head>
<body>
    <div >
        <div >Image</div>
        <div >Text</div>
        <div >Text</div>
        <div >Image</div>
    </div>
</body>

</html>

CodePudding user response：

You just have to applied to .full-width-two-column.reversed and not .full-width-two-column .reversed. The property is good the CSS selector is false