CSSでレスポンシブタイムラインを作成するにはどうすればよいですか？

CSSを使用してレスポンシブなタイムラインを作成するためのコードは、次のとおりです-

例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" event="width=device-width, initial-scale=1.0">
<style>
   * {
      box-sizing: border-box;
   }
   body {
      background-color: #9037f5;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
   }
   h2{
      text-align: center;
   }
   .timeline {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
   }
   .timeline::after {
      content: " ";
      position: absolute;
      width: 6px;
      background-color: rgb(253, 203, 255);
      top: 0;
      bottom: 0;
      left: 50%;
      margin-left: -3px;
   }
   /* eventsContainer around event */
   .eventsContainer {
      padding: 10px 40px;
      position: relative;
      background-color: inherit;
      width: 50%;
   }
   .eventsContainer::after {
      content: " ";
      position: absolute;
      width: 25px;
      height: 25px;
      right: -17px;
      background-color: rgb(219, 255, 12);
      border: 4px dashed rgb(255, 0, 0);
      background-clip: content-box;
      top: 15px;
      z-index: 1;
   }
   .displayLeft {
      left: 0;
   }
   .displayRight {
      left: 50%;
   }
   .displayLeft::before {
      content: " ";
      height: 0;
      position: absolute;
      top: 22px;
      width: 0;
      z-index: 1;
      right: 30px;
      border: medium solid rgb(225, 246, 255);
      border-width: 10px 0 10px 10px;
      border-color: transparent transparent transparent white;
   }
   .displayRight::before {
      content: " ";
      height: 0;
      position: absolute;
      top: 22px;
      width: 0;
      z-index: 1;
      left: 30px;
      border: medium solid white;
      border-width: 10px 10px 10px 0;
      border-color: transparent white transparent transparent;
   }
   .displayRight::after {
      left: -16px;
   }
   .event {
      padding: 20px 30px;
      background-color: white;
      position: relative;
      border-radius: 6px;
   }
   @media screen and (max-width: 600px) {
      .timeline::after {
         left: 31px;
      }
      .eventsContainer {
         width: 100%;
         padding-left: 70px;
         padding-right: 25px;
      }
      .eventsContainer::before {
         left: 60px;
         border: medium solid white;
         border-width: 10px 10px 10px 0;
         border-color: transparent white transparent transparent;
      }
      .displayLeft::after, .displayRight::after {
         left: 15px;
      }
      .displayRight {
         left: 0%;
      }
   }
</style>
</head>
<body>
<div class="timeline">
<div class="eventsContainer displayLeft">
<div class="event">
<h2>2017</h2>
<h3>Donald Trump became the 45th president of US</h3>
</div>
</div>
<div class="eventsContainer displayRight">
<div class="event">
<h2>2016</h2>
<h3>Summer Olympics are held in rio de Janerio</h3>
</div>
</div>
<div class="eventsContainer displayLeft">
<div class="event">
<h2>2015</h2>
<h3>7.8 Magnitude Earthquake strikes nepal</h3>
</div>
</div>
</div>
</body>
</html>