Realigning div content inside responsive grid layout

I have this grid of cards. The cards have an image and text underneath. When the browser width is reduced to 1000px, the cards change to a stacked format and stretch 100% of the screen width. The image should move to the left side of the text. What I can’t quite get right is the alignment of text to be on the right side of the image, like this:

To this:

#main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  width: 290px;
  border: 1px solid #f2f0f0;
  background-color: yellow;
}

.card-content {
  background-color: yellow;
  padding: 10px;
}

.card-image {
  height: 290px;
}


@media (max-width: 1000px) {
    .card {
    width: 100%;
  }
  .card-image {
    float: left;
  }
  .card-content {
    float: left;
  }
}

<div id="main">
  <div class="card">
      <div class="card-image">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Uranus_Voyager2_color_calibrated.png/290px-Uranus_Voyager2_color_calibrated.png">
    </div>
    <div class="card-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida sagittis eleifend. Morbi nec neque cursus, porta nulla nec, lacinia est. Integer vehicula nibh mauris, ut sollicitudin eros efficitur et. Proin eget auctor nisl. Maecenas enim libero, tristique a ornare et, lobortis ut dui. Donec eu mi erat.
    </div>
  </div>
  
  <div class="card">
      <div class="card-image">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Uranus_Voyager2_color_calibrated.png/290px-Uranus_Voyager2_color_calibrated.png">
    </div>
    <div class="card-content">
      Lorem ipsum
    </div>
  </div>
</div>

You need to sign in to view this answers

Related Post