Question: My bootstrap column not working on small screen

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:
<body>
  <div class="top">
    <div class="content">
      <h1>Welcome To <br /><span class="fancy">Fantasy Talk</span></h1>
      <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>
  </div>
</body>

**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;
}



Answer:
Instead of trying to position each button individually in the middle of the page, position the entire row of buttons. This will allow you to use Bootstrap columns better. You were also missing the the extra-small (col-12) and small (col-sm-12) column breakpoints.
Replace your HTML with this (Bootstrap 5):
<div class="row gy-3 position-absolute top-50 start-50 translate-middle w-100">
    <div class="col-12 col-sm-12 col-md-4 text-center">
        <button onClick="window.location.href='dothraki.html';"> Dothraki</button>
    </div>
    <div class="col-12 col-sm-12 col-md-4 text-center">
        <button onClick="window.location.href='valyrian.html';">Valyrian</button>
    </div>
    <div class="col-12 col-sm-12 col-md-4 text-center">
        <button onClick="window.location.href='sindarin.html';">Sindarin</button>
    </div>
</div>

And then replace your button CSS with this (removing the button positioning):
button {
    font-family: 'Almendra SC', serif;
    transition: 0.5s;
    padding: 15px 60px;
    text-decoration: none;
    font-size: 2vw;
    border-radius: 5px;
    border: 1px;
    transition: all 0.2s ease-in-out;
    color: rgba(255, 255, 255, 0.8);
    background: #146C94;
}

Also, I recommend you replace your buttons with Anchor tags if they are only going to take the user to a page.