使漫画元素具有响应性

Question

我创建了一个带有翻盖的漫画元素，现在我正在尝试使其具有响应性。我创建的背景是自适应的，只是漫画元素不起作用。

我尝试在Bootstrap样板程序设置和Flexbox中进行所有设置。

以下是我的CodePen的外观示例：https://codepen.io/reallynotprogramming/pen/vwroMN

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

      

<!--Comic Book-->
  <div class="flex-container">
    <div class="cover"></div>
    <div class="page1">

      <div class="box" id="box1">This is box 1 </div>
      <div class="box" id="box2">This is box 2 </div>
      <div class="box" id="box3">This is box 3 </div>
      <div class="box" id="box4">This is box 4 </div>
      <div class="box" id="box5">This is box 5 </div>
      <div class="box" id="box6">This is box 6 </div>
      <div class="box" id="box7">This is box 7 </div>
      <div class="box" id="box8">This is box 8 </div>
      <div class="box" id="box9">This is box 9 </div>

    </div>
  </div>

我希望我的漫画元素能及时响应。