<div dir="ltr" class="teaser image-left">
  <img src="https://images.unsplash.com/photo-1660586178733-d81eebe55499?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE5MzYwMjE&ixlib=rb-1.2.1&q=80" />
  <div class="text-container">
    <h2>Direction set to LTR</h2>
    <h3>Selection: image-left</h3>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores </p>
  </div>
</div>
<div dir="ltr" class="teaser image-right">
  <img src="https://images.unsplash.com/photo-1660586178733-d81eebe55499?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE5MzYwMjE&ixlib=rb-1.2.1&q=80" />
  <div class="text-container">
    <h2>Direction set to LTR</h2>
    <h3>Selection: image-right</h3>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores </p>
  </div>
</div>

<hr />


  <input type="checkbox" name="toggle-rtl-styles" />
  <label for="toggle-rtl-styles">Enable manual RTL styles to match selection expectations</label>

<div class="rtl-container">
  <div dir="rtl" class="teaser image-left">
    <img src="https://images.unsplash.com/photo-1660586178733-d81eebe55499?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE5MzYwMjE&ixlib=rb-1.2.1&q=80" />
    <div class="text-container">
      <h2>Direction set to RTL</h2>
      <h3>Selection: image-left</h3>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores </p>
    </div>
  </div>

  <div dir="rtl" class="teaser image-right">
    <img src="https://images.unsplash.com/photo-1660586178733-d81eebe55499?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjE5MzYwMjE&ixlib=rb-1.2.1&q=80" />
    <div class="text-container">
      <h2>Direction set to RTL</h2>
      <h3>Selection: image-right</h3>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores </p>
    </div>
  </div>
</div>
.teaser {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 800px) {
  .teaser {
    flex-direction: row;
  }
  
  .teaser.image-right {
    flex-direction: row-reverse;
  }
  
  /* Styles for RTL must be manually inverted to match the expected outcome of the select option */
  input:checked ~ .rtl-container .teaser[dir=rtl] {
    flex-direction: row-reverse;
  }
  
  input:checked ~ .rtl-container .teaser[dir=rtl].image-right {
    flex-direction: row;
  }
}

/* Decorative styles */
* {
  font-family: sans-serif;
}

.teaser {
  max-width: 800px;
  margin: 0 auto 20px;
  background-color: lightgrey;
}

.text-container {
  max-width: 400px;
  padding: 40px;
}

img {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 800px) {
  img {
    width: 400px;
    object-fit: cover;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.