Kod
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.w3-row div {
height: 50px;
}
</style>
</head>
<body>
<div class="w3-row">
<div class="w3-col l2 m4 s12 w3-green">
<div class="w3-col" style="width:60px">
<button>Tags</button>
</div>
<div class="w3-rest w3-orange">
Lorem
</div>
</div>
<div class="w3-col l2 m8 s12 w3-red">
<div class="w3-row">
<div class="w3-col" style="width:60px">Autor: </div>
<div class="w3-rest w3-orange">ipsum
</div>
</div>
</div>
<div class="w3-col l3 m5 s12 w3-red">
<div class="w3-row">
<div class="w3-col" style="width:100px">Kategorien: </div>
<div class="w3-rest w3-orange">dolor
</div>
</div>
</div>
<div class="w3-col l5 m7 s12 w3-dark-grey">
<div class="w3-row">
<div class="w3-col" style="width:60px">Typen: </div>
<div class="w3-rest w3-orange">sit
</div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.w3-row div {
height: 50px;
}
</style>
</head>
<body>
<div class="w3-row">
<div class="w3-col l2 m4 s12 w3-green">
<div class="w3-col" style="width:60px">
<button>Tags</button>
</div>
<div class="w3-rest w3-orange">
Lorem
</div>
</div>
<div class="w3-col l2 m8 s12 w3-red">
<div class="w3-row">
<div class="w3-col" style="width:60px">Autor: </div>
<div class="w3-rest w3-orange">ipsum
</div>
</div>
</div>
<div class="w3-col l3 m5 s12 w3-red">
<div class="w3-row">
<div class="w3-col" style="width:100px">Kategorien: </div>
<div class="w3-rest w3-orange">dolor
</div>
</div>
</div>
<div class="w3-col l5 m7 s12 w3-dark-grey">
<div class="w3-row">
<div class="w3-col" style="width:60px">Typen: </div>
<div class="w3-rest w3-orange">sit
</div>
</div>
</div>
</div>
</body>
</html>
https://codepen.io/rudolph-reti/pen/yLymNqj
Na urządzeniach "small" wyświetlają się 4 wiersze po dwa divy. Divy: Tags, Autor, Kategorien, Typen mają stałe rozmiary podane w px. Pozostałe divy wypełniają automatycznie poszczególne wiersze do końca. Podobny efekt chciałbym osiągnąć na urządzeniach "medium" i "large", tzn.:
Medium:
pierwszy wiersz: div "ipsum" ma wypełniać wiersz do końca
drugi wiersz: div "sit" ma wypełniać wiersz do końca
pozostałe divy mają mieć stałe rozmiary
Large:
div "sit" ma wypełniać wiersz do końca, pozostałe divy mają mieć stałe rozmiary.
Jak to zrobić najprościej? Da się to zrobić na tym W3 czy przesiąść się na coś innego? A może najlepiej zrobić to wszystko krok po kroku za pomocą media queries?