I have noticed an issue with Bootstrap 4 display utilities not functioning properly with the .collapse class, a feature that worked seamlessly with Bootstrap 3. Despite my efforts to research this problem, I have been unable to find similar inquiries regarding it.
My goal is to have the element #demo displayed by default on sm, md, lg, and xl screens while remaining hidden on mobile view (xs). However, since Bootstrap 4 no longer supports the xs breakpoint according to documentation, utilizing the display property has proven challenging.
Upon toggling the collapse button on mobile view, I intend for #demo to become visible. Additionally, I have encountered issues with the .collapsing class functionality. Any guidance or assistance in resolving these concerns would be greatly appreciated.
.container {
margin: 30px;
}<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="d-none d-sm-block collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>