小さな画面でオーバーラップするコンテンツブートストラップ

画像のように、私のコンテンツはデスクトップでも風景のバージョンでも縦長モードではうまくいきません（画像で強調表示されています）。コンテンツは重複しています。デバイスの画面？私の説明が長いが、descripitonが短く重なり合っていないときに起こるだけです。どのようにhte列間の一定のマージンを維持するのですか？ CSSは、私がbootstrap4小さな画面でオーバーラップするコンテンツブートストラップ

を使用しています

body{ 
padding-top: 5%; 
font-family: 'Roboto Slab', serif; 
} 

h2{ 
text-transform: uppercase; 
font-size: 1.2em; 
}

を使用

HTML

<!DOCTYPE html> 

<div class="container"> 
<div class="row"> 

    <div class=" col-lg-6 col-md-12 col-sm-12 form-group"> 
     <a href=""><h2>Dtu Feed</h2> 
     <img src="Images/dtufeed.png" alt="DTU FEED" height="50%" 
width="100%"> 
     <p>Social Network platform designed specially for all DTU 
    students.Containing Dynamically added events by students/society 
    themselves , a map of college ,various groups like book club,a platform 
    for voting on general concerns,a separate profiles for all by signing up 
    through fb,google+ or email and all the extra stuff like notes etc !</p> 
    </a> 

    </div> 

    <div class=" col-lg-6 col-md-12 col-sm-12 form-group"> 
     <a href="http://yat.pythonanywhere.com/"><h2>Blog</h2> 
     <img src="Images/blog.png" alt="BLOG" height="50%" width="100%"> 
      <p>Created a blog website with features of creating and logging in 
    a profile,posting and commenting !</p></a> 

    </div> 

    <div class=" col-lg-6 col-md-12 col-sm-12 form-group"> 

     <a href="Todo/index.html"><h2>To Do List</h2> 
     <img src="Images/todo.png" alt="To do list" height="50%" 
width="100%"> 
     <p>General to-do list with animations upon hovering deleting and 
    adding!</p></a> 
    </div> 

    <div class=" col-lg-6 col-md-12 col-sm-12 form-group"> 
     <a href="PlayTap/circles.html"><h2>PlayTap</h2> 
     <img src="Images/playtap.png" alt="PlayTap" height="50%" 
    width="100%"> 
     <p>Press Keyboard keys to create animaions and sounds !</p></a> 

    </div> 
</div> 
</div>

： ![enter image description here ] 1