Responsive mit display:flex

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquet at augue quis accumsan. Nunc semper augue vitae sapien tincidunt, sit amet euismod augue mollis.

TWINS

Nam iaculis tortor cursus

Nunc non risus ut dui porta sagittis. Nam iaculis tortor cursus, suscipit urna sed, gravida neque. Proin ac tristique justo, varius commodo tortor. Morbi finibus lectus non diam fringilla, quis semper libero auctor.

Donec eget velit pharetra

Vestibulum mattis massa libero, eget malesuada risus convallis in. Donec eget velit pharetra, pulvinar arcu in, rutrum mi. Morbi vitae elit fringilla, hendrerit turpis euismod, placerat urna.

Pellentesque commodo

Pellentesque tincidunt lectus vel elit pharetra, non convallis lorem finibus. Pellentesque commodo libero auctor malesuada scelerisque.

Donec eget velit pharetra

Suspendisse ultricies nec ipsum non vulputate. Cras vitae eros volutpat, euismod felis et, commodo ipsum. Phasellus vehicula tortor vel turpis maximus, eu viverra magna consectetur.

Nulla facilisi.

Curabitur vel sapien non purus bibendum tristique. Nulla facilisi. Donec urna sapien, ullamcorper nec eros at, eleifend consectetur lacus. Suspendisse vulputate varius neque, ut semper est mollis at. Nam tempus eget lacus sit amet malesuada.

<style>
h1 { text-align: center; }
img { width: 100%; height: auto; }
figure { margin: 0; width: 100%; background: hsl(30,40%,96%)}
article {margin-bottom: 1em; }
.topmenu ul { 
    padding-left: 0; 
    margin-left: 0;
    width: 100%;
    display: flex; 
        display: -ms-flexbox; 
    flex-wrap: wrap;
        -ms-flex-wrap: wrap;
    justify-content:space-between;
        -ms-flex-pack:justify; }
.topmenu li { 
    background: hsl(350,50%,50%); 
    color: white; 
    padding: 1em;
    display: inline-block;
    width: 49%; font-size: 1.2em;
    box-sizing: border-box; 
    text-align: center;
    margin-bottom: 1ex }

@media (min-width: 720px) {
    h2 { margin-top: 0; }
    article {
        display: flex; 
            display: -ms-flexbox; 
        flex-wrap: wrap;
            -ms-flex-wrap: wrap;
        justify-content:space-between;
        -ms-flex-pack:justify;
    }
    article figure { width: 36%;}
    article div { width: 58%;}
}

@media (min-width: 980px) {
    main {
        display: flex; 
            display: -ms-flexbox; 
        flex-wrap: wrap;
            -ms-flex-wrap: wrap;
        justify-content:space-between;
        -ms-flex-pack:justify;
    }
    
    article:nth-child(1), article:nth-child(2) { width: 49%; margin-bottom: 3em; }
    article:nth-child(3), article:nth-child(4), article:nth-child(5), article:nth-child(6) {
    width: 23.5%
    }
    
    article:nth-child(3), article:nth-child(4), article:nth-child(5), article:nth-child(6)  {
        flex-direction: column; 
        justify-content: flex-start;
    }
    
    article:nth-child(3) figure, article:nth-child(4) figure, article:nth-child(5) figure, article:nth-child(6) figure  {
        width: 100%;
        margin-bottom: 1em; 
    }
    
    article:nth-child(3) div, article:nth-child(4) div, article:nth-child(5) div, article:nth-child(6) div  {
        width: 100%;
    }
}

@media (min-width: 1260px) {
    .topmenu li { 
        width: 24%; height: 120px; font-size: 1.4em; }
}
</style>

<div class="topmenu">
	<ul>
		<li>pulvinar</li>
		<li>commodo</li>
		<li>finibus</li>
		<li>volutpat</li>
	</ul>
</div>
<header>
	<h1>Responsive mit display:flex</h1>
</header>
<main>
	<article>
		<figure>…</figure>
		<div>
			<h2>Lorem ipsum</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </p>
		</div>
	</article>
	…
</main>
1440 px
1650