JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

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...

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: 280px;
  }
  #wrapperrechts {
    flex-basis: 280px;
  }
}