W3Schools Tryit Editor

<!DOCTYPE html>
<html lang="en">
<title>W3.CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/6/w3.css">
<body class="w3-container">

<h3>Mobile First Fluid Row</h3>
<h5>Try to resize the window</h5>
<br>
<div class="w3-row">
<div class="w3-container w3-col m4 l3 w3-blue">
<p>
12 colums (s12)<br>on small screens<br><br>
4 columns (m4)<br> on medium screens<br><br>
3 columns (l3)<br>on large screens<br><br>
</p>
</div>
<div class="w3-container w3-col m8 l9 w3-light-blue">
<p>12 colums (s12)<br>on small screens<br><br>
8 columns (m8)<br> on medium screens<br><br>
9 columns (l9)<br>on large screens<br><br>
</p>
</div>
</div>
<div class="w3-row">
  <div class="w3-panel w3-col m1 w3-blue"><p>1</p></div>
  <div class="w3-panel w3-col m1"><p>2</p></div>
  <div class="w3-panel w3-col m1 w3-blue"><p>3</p></div>
  <div class="w3-panel w3-col m1"><p>4</p></div>
  <div class="w3-panel w3-col m1 w3-blue"><p>5</p></div>
  <div class="w3-panel w3-col m1"><p>6</p></div>
  <div class="w3-panel w3-col m1 w3-blue"><p>7</p></div>
  <div class="w3-panel w3-col m1"><p>8</p></div>
  <div class="w3-panel w3-col m1 w3-blue"><p>9</p></div>
  <div class="w3-panel w3-col m1"><p>10</p></div>
  <div class="w3-panel w3-col m1 w3-blue"><p>11</p></div>
  <div class="w3-panel w3-col m1"><p>12</p></div>
</div>

<div class="w3-row">
  <div class="w3-panel w3-panel w3-col w3-blue"><p>Default</p></div>
</div>

</body>
</html>