Bootstrap 4 carousel captions disappear when resizing

Question

Using Bootstrap 4. Essentially, I have a carousel that is cycling through a bunch of different project features (GIFs with captions). I have the captions below it based on some code from elsewhere on SO.

Works perfectly on medium/large screens but once I get too small, the captions just disappear altogether. How can I keep the captions on smaller screens?

<div class = "carousel-inner">
<div class = "carousel-item active">
  <img class = "d-block carousel-image" src = "assets/translate-trimmed.gif" alt = "GIF of Sketchy translating objects.">
  <div class = "carousel-caption d-none d-md-block">
     <h5 class = "feature-name">Translate</h5>
     <p class = "feature-detail">
        Using the "Select Shape" option, user can move shapes around the canvas. Translation is controlled by dragging the mouse across the screen.
     </p>
  </div>
</div>
<div class = "carousel-item">
  <img class = "d-block carousel-image" src = "assets/raise-lower-trimmed.gif" alt = "GIF of Sketchy raising/lowering layers.">
  <div class = "carousel-caption d-none d-md-block">
     <h5 class = "feature-name">
        Raise/Lower
     </h5>
     <p class = "feature-detail">
        The "Raise" and "Lower" buttons can move shapes up or down in the list of layers. Layers are preserved even after saving/loading.
     </p>
  </div>
</div>

For CSS, I'm using the following relevant stuff:

.carousel-item .carousel-caption {
 position: static;
 padding-top: 20px;
 padding-bottom: 20px;
 text-align: center;
   margin-bottom: 10px;
}

Any ideas? I can provide more code but the project is pretty long and I don't think anything else is messing with it.  

Answer 1

Answered my own question. Needed to remove d-md-block and d-none from each of the div of class "carousel-caption". See here for more info.