CodePen Embed - 圖片文字交錯-使用flex

<div class="wrap">
            <div class="d-flex" style="align-items: center;">
                <div class="w-50">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit nulla blanditiis laudantium molestiae expedita maiores consectetur totam, fugiat odio eius, sequi perspiciatis fugit. Soluta vel doloribus quo, nostrum praesentium recusandae!</p>
                </div>
                <div class="w-50" >
                    <img class="img-fluid" src="https://media.nationalgeographic.org/assets/photos/380/216/1c9ab248-0c9c-413d-b0c8-ce8aec56b821.jpg" alt="">
                </div>
            </div>
            <div class="d-flex" style="align-items: center; flex-direction: row-reverse;">
                <div class="w-50">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit nulla blanditiis laudantium molestiae expedita maiores consectetur totam, fugiat odio eius, sequi perspiciatis fugit. Soluta vel doloribus quo, nostrum praesentium recusandae!</p>
                </div>
                <div class="w-50">
                    <img class="img-fluid" src="https://global.unitednations.entermediadb.net/assets/mediadb/services/module/asset/downloads/preset/Libraries/Production+Library/10-02-2022_Unsplash_ocean.jpg/image1170x530cropped.jpg" alt="">
                </div>
            </div>
            <div class="d-flex" style="align-items: center;">
                <div class="w-50">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit nulla blanditiis laudantium molestiae expedita maiores consectetur totam, fugiat odio eius, sequi perspiciatis fugit. Soluta vel doloribus quo, nostrum praesentium recusandae!</p>
                </div>
                <div class="w-50">
                    <img class="img-fluid" src="https://image.jimcdn.com/app/cms/image/transf/none/path/sa5da3ad6a208eec6/backgroundarea/i056862cfc4b2651d/version/1600946425/image.jpg" alt="">
                </div>
            </div>
        </div>

.d-flex{
    display: flex;
}

.w-50{
    width: 50%;
}

.img-fluid{
    width: 100%;
}

This Pen is owned by int on CodePen.

See more by @intHuang on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.