Html Flexbox 在特定宽度上更改文本和图像位置

.fish {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-auto-rows: 1fr;
}

figure {
  background-color: darkred;
  margin: 5px;
  display: flex;
  flex-direction: column;
}


@media only screen and (max-width: 768px) {
  .fish {
    grid-template-columns: 1fr;
  }
  figure {
    flex-direction: row;
  }
  /* Makes every even number figure container reversed */
  figure:nth-of-type(even) {
    flex-direction: row-reverse;
  }
  /* Max width 50% and height: auto for responsive image that takes up 50% of width */
  .fishpics {
    max-width: 50%;
    height: auto;
    object-fit: cover;
  }
  .text-container {
    max-width: 50%;
  }
}

<div class="fish">
  <figure>
    <img class="fishpics" src="http://via.placeholder.com/640x360">
    <div class="text-container">
      <h3>tekst</h3>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam itaque saepe molestias at iusto iure illo voluptate? Veniam, doloribus mollitia. Nihil, repellendus aut? Accusantium dolorum tempora, sunt minus itaque id?</p>
    </div>
  </figure>
  <figure>
    <img class="fishpics" src="http://via.placeholder.com/640x360">
    <div class="text-container">
      <h3>tekst</h3>
      <p class="pright">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam itaque saepe molestias at iusto iure illo voluptate? Veniam, doloribus mollitia. Nihil, repellendus aut? Accusantium dolorum tempora, sunt minus itaque id?</p>
    </div>
  </figure>
  <figure>
    <img class="fishpics" src="http://via.placeholder.com/640x360">
    <div class="text-container">
      <h3>tekst</h3>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam itaque saepe molestias at iusto iure illo voluptate? Veniam, doloribus mollitia. Nihil, repellendus aut? Accusantium dolorum tempora, sunt minus itaque id?</p>
    </div>
  </figure>
</div>