JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-container" title="version1">
  <div>
    <p></p>
    <div>
      <img src="https://www.w3schools.com/cssref/klematis.jpg" alt="Bild zu Feld 1" />
    </div>
  </div>  
  <div>
    <p></p>
    <div>
      <img src="https://www.w3schools.com/cssref/img_flwr.gif" alt="Bild zu Feld 2" />
    </div>
  </div>
  <div>
    <p></p>
    <div>
      <img src="https://www.w3schools.com/cssref/landscape.jpg" alt="Bild zu Feld 3" />
    </div>
  </div>
</div>
<br>
<h1>
Info:<br>
  Wenn du jetzt den title="version1" vom class="flex-container" in title="version2" änderst, hast du das gewünschte Resultat!
</h1>

CSS

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-flow: row;
}

.flex-container > div {
  display: flex;
  flex-flow: column;
  justify-content: center;
  text-align: center;
}

.flex-container img {
  width: 255px;
  visibility: hidden;
}

.flex-container[title~=version1] > div:nth-of-type(1) > div {
  background: url('https://www.w3schools.com/cssref/klematis.jpg') center center no-repeat;
  background-size: cover;
}

.flex-container[title~=version1] > div:nth-of-type(2) > div {
  background: url('https://www.w3schools.com/cssref/img_flwr.gif') center center no-repeat;
  background-size: cover;
}

.flex-container[title~=version1] > div:nth-of-type(3) > div {
  background: url('https://www.w3schools.com/cssref/landscape.jpg') center center no-repeat;
  background-size: cover;
}



.flex-container[title~=version2] > div:nth-of-type(1) > div {
  background: url('https://assets.pixolum.com/blog/wp-content/uploads/2016/10/focus-stacking-scharfe-bilder-1.jpg') center center no-repeat;
  background-size: cover;
}

.flex-container[title~=version2] > div:nth-of-type(2) > div {
  background: url('http://caching-production.jetzt.de/files/56519922215172420-welpe-patrick-pleul-dpa.full.jpg') center center no-repeat;
  background-size: cover;
}

.flex-container[title~=version2] > div:nth-of-type(3) > div {
  background: url('http://topsportvereine.de/wp-content/gallery/bilder-test-galerie/image.jpg') center center no-repeat;
  background-size: cover;
}

.flex-container[title~=version1] > div:nth-of-type(1) > p:before {
  content: 'Hier steht ein Text1';
  display: block;
}

.flex-container[title~=version1] > div:nth-of-type(2) > p:before {
  content: 'Hier steht ein Text2';
  display: block;
}

.flex-container[title~=version1] > div:nth-of-type(3) > p:before {
  content: 'Hier steht ein Text3';
  display: block;
}

.flex-container[title~=version2] > div:nth-of-type(1) > p:before {
  content: 'Hier steht ein neuer Text1 + neue Bilder';
  display:...