JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sectiontop">

  <div id="bigzufall" class="grosslinks">
    <a href="videos/do-that-baby-mama.php">
      <img src="http://lorempixel.com/output/people-q-c-360-280-6.jpg">
      <div class="ueberschrift">
        <p>Do that Baby Mama! Müdigkeit in der Schwangerschaft? Von wegen...</p>
      </div>
    </a>
  </div>
  <div id="wrapperrechts">

    <div id="obenmittezufall" class="rechtsklein">
      <a href="videos/du-wirst-papa.php">
        <img src="http://lorempixel.com/output/people-q-c-180-140-5.jpg">
        <div class="ueberschrift">
          <p>Du wirst Papa! Männer erfahren, dass Sie Vater werden.</p>
        </div>
      </a>
    </div>

    <div id="obenrechtszufall" class="rechtsklein">
      <a href="videos/junge-rettet-seinem-zwillingsbruder-das-leben.php">
        <img src="http://lorempixel.com/output/people-q-c-180-140-4.jpg">
        <div class="ueberschrift">
          <p>Zweijähriger rettet seinem Zwillingsbruder das Leben!</p>
        </div>
      </a>
    </div>

    <div id="untenmittezufall" class="rechtsklein">
      <a href="test/junge-rettet-seinem-zwillingsbruder-das-leben - Kopie (2).php">
        <img src="http://lorempixel.com/output/people-q-c-180-140-3.jpg">
        <div class="ueberschrift">
          <p>Zweijähriger rettet seinem Zwillingsbruder das Leben!</p>
        </div>
      </a>
    </div>

    <div id="untenrechtszufall" class="rechtsklein">
      <a href="test/junge-rettet-seinem-zwillingsbruder-das-leben - Kopie (3).php">
        <img src="http://lorempixel.com/output/people-q-c-180-140-2.jpg">
        <div class="ueberschrift">
          <p>Zweijähriger rettet seinem Zwillingsbruder das Leben!</p>
        </div>
      </a>
    </div>

  </div>

</div>

CSS

.sectiontop {
  display: flex;
}

#bigzufall {
  flex-basis: 360px;
  flex-grow: 0;
  flex-shrink: 1;
}

#wrapperrechts {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 360px;
  flex-grow: 0;
  flex-shrink: 1;
}

.rechtsklein {
  flex-basis: 50%;
  flex-shrink: 1;
  position: relative;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.ueberschrift {
  position: absolute;
  color: white;
  bottom: 0;
}

.ueberschrift p {
  text-align: center;
  padding: 5%;
}

a {
  position: relative;
}

@media (max-width: 600px) {
  .sectiontop {
    flex-direction: column;
  }
  #bigzufall {
    flex-basis: auto;
    /* chnage*/
  }
  #wrapperrechts {
    flex-basis: auto;
    /* chnage*/
  }
}