My buttons inside bootstrap columns not appearing when the screen size is small.
I wanted the buttons to appear one below the other when screen size is small.
What changes should I make to get my buttons one below each other on a small screen.
full screen
small screen

adding the html code below:
`

Welcome To
Fantasy Talk

<div class="row">

<div class="col-md-4 ">
    <button onClick="window.location.href='dothraki.html';" > Dothraki</button>
  
</div>

<div class="col-md-4 ">
    <button onClick="window.location.href='valyrian.html'; ">Valyrian</button>
   
</div>

<div class="col-md-4 ">
    <button onClick="window.location.href='sindarin.html';">Sindarin</button>
  
</div>

 </div>

</div>

`

**Adding CSS code: **

body{
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100vh;
  /* cursor: url(https://cur.cursors-4u.net/games/gam-11/gam1090.png),auto; */
  
  cursor: url(https://cur.cursors-4u.net/games/gam-13/gam1229.png),auto;
}
.top{
    width: 100%;
    height: 100%;
    padding: 2rem;

    
    position:absolute;
    background-image: url(image/img1.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    justify-content: center;
    animation: change 13s infinite ease-in-out;
}





button{
    font-family: 'Almendra SC', serif;
    transition: 0.5s;
    padding: 15px 60px;
    text-decoration: none;
    font-size: 2vw;
position: absolute;
    border-radius: 5px;
    
    top: 50%;
    transform: translate(-50%, -50%);
border: 1px;
    transition: all 0.2s ease-in-out;
    color: rgba(255, 255, 255, 0.8);
    background: #146C94;
}
button:hover{
  
    margin-top: -10px;
    color: rgba(255, 255, 255, 1);
    /* box-shadow: 0 5px 15px rgba(145, 92, 182, .4); */
    box-shadow: 0 5px 15px #39B5E0;
}

@keyframes change{

    0%{
        background-image: url(image/img6.jpg);
    }
    20%{
        background-image: url(image/img2.jpg);
    }
    40%{
        background-image: url(image/img3.jpg);
    }
    60%{
        background-image: url(image/img4.jpg);
    }
    80%{
        background-image: url(image/img5.jpg);
    }
    100%{
        background-image: url(image/img6.jpg);
    }
}




  h1{
    padding: 2rem;
    color:white;
    font-family: 'Spirax', cursive;
  
    font-size: 5vw;
    text-transform: uppercase;
    text-align: center;
    line-height: 1;


  }
  .fancy{
    font-size: 8vw;
  }