<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="alert alert-dismissible alert-info"><button type="button" class="close" data-dismiss="alert">X</button> <strong>IMPORTANT!</strong> View in fullscreen, since it doesn't work properly in the preview window.</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="card">
<div class="card-header">Bootstrap V4 new hidden system</div>
<div class="card-body">
<div class="d-none d-sm-block"> hidden-xs
<div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
<div class="d-none d-lg-block"> visible-lg and up (hidden-md and down)
<div class="d-none d-xl-block"> visible-xl</div>
</div>
</div>
</div>
<hr/>
<strong>
<div class="d-sm-none"> eXtra Small < 576px </div>
<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> SMall ≥ 576px </div>
<div class="d-none d-md-block d-lg-none d-xl-none"> MeDium ≥ 768px </div>
<div class="d-none d-lg-block d-xl-none"> LarGe ≥ 992px </div>
<div class="d-none d-xl-block"> eXtra Large ≥ 1200px </div>
</strong>
<hr/>
<div class="d-xl-none"> hidden-xl (visible-lg and down)
<div class="d-lg-none d-xl-none"> visible-md and down (hidden-lg and up)
<div class="d-md-none d-lg-none d-xl-none"> visible-sm and down (or hidden-md and up)
<div class="d-sm-none"> visible-xs</div>
</div>
