要素を重複しないようにするにはどうすればよいですか？

Question

段落とイメージが重ならないように見えません。私はこの質問が以前に答えられたと確信していますが、私は解決策を見つけることができませんでした。もちろん、ウェブサイトはちょうど練習です、それはどこにでも置かれるつもりはない、私は練習が必要です。私は途中でブートストラップ4を使用しています。

HTML：

<section id="bio"> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-lg-12"> 
      <h1 class="display-3 text-center mt-5">Who am I?</h1> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-lg-4"> 
      <img src="imgs/person.jpg"> 
     </div> 
     <div class="col-lg-8 mt-5 d-block"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
    </div> 
</div> 
</section> 

はCSS：あなたは以下の例のように静的にご#bio img位置をリセットする必要があり、あなたのメディアクエリで

#bio { 
     font-family: 'Poiret One', serif; 
    } 

    #bio img { 
     border-radius: 100%; 
     height: 350px; 
     width: 350px; 
     position: absolute; 
     left: 5%; 
     top: 10%; 
     display: block; 
    } 
    @media screen and (max-width: 988px) { 
     #bio img { 
      margin-top: 10%; 
     } 
    } 

    #bio p { 
     float: right; 

    } 

Answer 1

：

@media screen and (max-width: 988px) { 
    #bio img { 
     margin-top: 10%; 
     position: static; 
    } 
} 

私は願っていますこのヘルプ

Answer 2

幅をパーセンテージで定義し、メディアクエリを試すことができます。