CSSを使用してレスポンシブブログレイアウトを作成するにはどうすればよいですか？

CSSを使用してレスポンシブブログレイアウトを作成するためのコードは次のとおりです-

例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   * {
      box-sizing: border-box;
   }
   body {
      margin: 0;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   nav {
      font-size: 20px;
      background-color: rgb(136, 22, 182);
      color: #cccccc;
      height: 75px;
   }
   ul {
      position: fixed;
      right:10px;
   }
   ul li {
      display: inline;
      padding-right: 30px;
      font-weight: 500;
      color: rgb(251, 255, 0);
   }
   .logo {
      width: 75%;
      margin-left: auto;
      margin-right: auto;
      color: white;
      float: left;
      font-size: 30px;
      padding-left: 20px;
      padding-top: 20px;
   }
   .blog {
      margin-top: 20px;
      width: 75%;
      margin-left: auto;
      margin-right: auto;
      height: 400px;
   }
   .post {
      margin-top: 20px;
      float: left;
   }
   .blogHeader {
      font-size: 36px;
      margin-bottom: 20px;
   }
   .links {
      float: right;
   }
   .links li {
      color: black;
   }
   footer {
      color: white;
      position: fixed;
      width: 100%;
      bottom: 0;
      margin-left: auto;
      margin-right: auto;
      font-size: 30px;
      height: 100px;
      padding: 20px;
      background-color: rgb(9, 141, 101);
      text-align: center;
   }
</style>
</head>
<body>
<nav>
<div class="logo">
↷ LOGO ↶
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div class="blog">
<div class="post">
<div class="blogHeader">
<h1>Blog Heading</h1>
</div>
<div class="blog-body">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt non neque eos eaque veritatis praesentium.
</p>
</div>
</div>
<div class="links">
<ul>
<li>BLOG 2</li>
<li>BLOG 3</li>
</ul>
</div>
</div>
<footer>
Copyright ©
</footer>
</body>
</html>