<h1>Responsive design</h1>
<article>
  <p>If adaptive layouts are a mashup of media queries and fixed-width layouts, responsive web design is a mashup of media queries and liquid layouts. The term was coined by Ethan Marcotte in <a href="https://alistapart.com/article/responsive-web-design/">an article in A List Apart</a> in 2010.</p>
  <p>Ethan defined three criteria for responsive design:</p>
 <ol>
   <li>Fluid grids</li>
   <li>Fluid media</li>
   <li>Media queries</li>
 </ol>
 <p>If a site was responsive, its layout and images would look good on any device.</p>
</article>
<aside>
  <p>This example is using the CSS <code>float</code> property to create columns. That was a popular technique before CSS grid or flexbox existed.</p>
</aside>

body {
  font-family: sans-serif;
  line-height: 1.5;
  padding: 0 16px;
}

h1 {
  margin-bottom: 0;
}

@media all and (min-width: 800px) {
  article {
    width: 66%;
    float: left;
  }
  
  aside {
    width: 33%;
    float: right;
  }
}

@media all and (min-width: 1600px) {
  h1 {
    width: 22.5%;
    float: left;
  }
  
  article {
    width: 50%;
    float: left;
  }
  
  aside {
    width: 22.5%;
    float: right;
  }
}