Bootstrap visibility utility is hiding an element when it shouldn't - html

Question

I am trying to hide "Updated: " on smaller screen sizes and only keep the date - which works fine. The problem is, it hides the date and only shows the "Updated: " part in the span on larger screen sizes.
.u-date-box {
position: absolute;
overflow: hidden;
z-index: 1;
bottom: 5%;
left: 0;
height: 2rem;
background: #FFF;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="u-date-box">
<p>
<span class="d-none d-sm-block">Updated: </span>
<%= #post.updated_at.strftime('%b %d, %Y') %>
</p>
</div>
I know d-none d-sm-block is the issue as I tried removing those classes from the span and everything displayed fine. Any idea why this happens?

Answer 1

your code works perfectly, When you are in a larger screen both updated and time will appear, and on the small screen, only time will appear. To make it inline change your d-sm-block to d-sm-inline. It will work
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div>
<p>
<span class="d-none d-sm-inline">Updated: </span>
abcd
</p>
</div>

Answer 2

only for correct understanding:
the span:updated should disappear at smaller sizes but visible on larger screen.
the "date" should be visible at all.
Then your given code should work.
<div>
<p>
<span class="d-none d-sm-block">Updated: </span>
<%= #post.updated_at.strftime('%b %d, %Y') %>
</p>
</div>
I have added a fiddle