How to override the default order in which elements are stacked?

Question

I am creating a responsive landing page which features several rows.

Each row consists of 2 div elements side by side - one with an image the other with text.

If one row has the image to the left and the text to the right-hand-side of the row, the next row will have the image to the right and the text to the left instead.

The problem is, for narrower screens I want that the div with text always stacks on top of the div with the image.

How can I achieve this responsive behaviour?

Here is my codepen:

https://codepen.io/ryanvb92/pen/MWbprvY

.section {
  background-image: linear-gradient(to bottom, #eee, #fff);
}

.content {
  padding-top: 60px;
  padding-bottom: 60px;
  width: 90%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
.content .words {
  padding: 50px;
  background-color: pink;
}
.content .illustration {
  background-color: lightblue;
}

<div class="section">
  <div class="content">
    <div class="words">
      <h1>Lorem Ipsum</h1>
      <p>The pink div should always be stacked on top when the breakpoint is surpassed.</p>
    </div>
    <div class="illustration">a
      <!--       <img src="https://www.robertsoncomm.com/wp-content/uploads/2020/04/people.jpg"> -->
    </div>
  </div>
</div>

<div class="section">
  <div class="content">
    <div class="illustration">
      <img src="https://img.freepik.com/free-vector/group-people-illustration-set_52683-33806.jpg?size=626&ext=jpg">
    </div>
    <div class="words">
      <h1>Lorem Ipsum</h1>
      <p>The pink div should always be stacked on top when the breakpoint is surpassed.</p>
    </div>
  </div>
</div>

Answer 1

There are various ways to approach the problem, depending on your specific needs.

One approach would be to use the order property along with media queries.

Try this:

@media ( max-width: 800px ) {
  .content      { flex-wrap: wrap; }
  .illustration { order: 1; }
}

.section {
  background-image: linear-gradient(to bottom, #eee, #fff);
}

.content {
  padding-top: 60px;
  padding-bottom: 60px;
  width: 90%;
  margin: auto;
  display: flex;
  /* flex-wrap: wrap; */
}
.content .words {
  padding: 50px;
  background-color: pink;
}
.content .illustration {
  background-color: lightblue;
}

@media ( max-width: 800px ) {
  .content      { flex-wrap: wrap; }
  .illustration { order: 1; }
}

<div class="section">
  <div class="content">
    <div class="words">
      <h1>Lorem Ipsum</h1>
      <p>The pink div should always be stacked on top when the breakpoint is surpassed.</p>
    </div>
    <div class="illustration">a
      <!--       <img src="https://www.robertsoncomm.com/wp-content/uploads/2020/04/people.jpg"> -->
    </div>
  </div>
</div>

<div class="section">
  <div class="content">
    <div class="illustration">
      <img src="https://img.freepik.com/free-vector/group-people-illustration-set_52683-33806.jpg?size=626&ext=jpg">
    </div>
    <div class="words">
      <h1>Lorem Ipsum</h1>
      <p>The pink div should always be stacked on top when the breakpoint is surpassed.</p>
    </div>
  </div>
</div>

Read more about the order property.

Answer 2

You could also put a class to the elements where the text goes on the left and the image on the right using also flexbox.

@media ( max-width: 800px ) {
  .content { flex-direction: column-reverse; }
}