JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<div class="container">
    <div class="img-pos-right row flex-row-reverse align-items-center my-5">
        <div class="col-md-5">
            <div class="slider-column">
                <img class="img-fluid" src="https://source.unsplash.com/random/803x535?1">
            </div>
        </div>
        <div class="col-md-7">
            <div class="content-column">
                <h3 class="h6 font-weight-bold text-uppercase small">Luxus-Penthouse</h3>
                <h2 class="font-weight-light">Luxus-Penthouse<br>Dolce Vita</h2>
                <p class="mb-0">Loft-Stil, Indoor-Whirlpool, Sauna, 1 Schlafbereich, 1 Luxus-Bad, WLAN, SKY-TV, Gaskamin, Klimaanlage, Waschmaschine-/Trockner-Kombi, Strandkorb, WEBER-E-Grill & Dachterrasse + hauseigene Wallbox Ladestation für Elektrofahrzeuge Typ 1 + Typ 2 - Fertigstellung Sommer 2019.</p>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="img-pos-left row align-items-center my-5">
        <div class="col-md-5">
            <div class="slider-column">
                <img class="img-fluid" src="https://source.unsplash.com/random/803x535?2">
            </div>
        </div>
        <div class="col-md-7">
            <div class="content-column">
                <h3 class="h6 font-weight-bold text-uppercase small">Luxus-Penthouse</h3>
                <h2 class="font-weight-light">Luxus-Penthouse<br>Dolce Vita</h2>
                <p class="mb-0">Loft-Stil, Indoor-Whirlpool, Sauna, 1 Schlafbereich, 1 Luxus-Bad, WLAN, SKY-TV, Gaskamin, Klimaanlage, Waschmaschine-/Trockner-Kombi, Strandkorb, WEBER-E-Grill & Dachterrasse + hauseigene Wallbox Ladestation für Elektrofahrzeuge Typ 1 + Typ 2 - Fertigstellung Sommer 2019.</p>
            </div>
        </div>
    </div>
</div>

SCSS

.img-pos-left .slider-column {
    @media (min-width: 768px) {
        margin-left: calc((100vw - 720px) / -2);
    }

    @media (min-width: 992px) {
        margin-left: calc((100vw - 960px) / -2);
    }

    @media (min-width: 1200px) {
        margin-left: calc((100vw - 1140px) / -2);
    }
}

.img-pos-right .slider-column {
    @media (min-width: 768px) {
        margin-right: calc((100vw - 720px) / -2);
    }

    @media (min-width: 992px) {
        margin-right: calc((100vw - 960px) / -2);
    }

    @media (min-width: 1200px) {
        margin-right: calc((100vw - 1140px) / -2);
    }
}

.img-fluid {
    width: 100%;
}