Illustration:
<div hidden-xs visible-block-md>Concealed on small screen</div>
A CSS solution could be:
$screen-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
@each $keySize, $valueSize in $screen-breakpoints {
[hidden-#{$keySize}] {
@media (min-width: $valueSize) {
display: none;
}
}
}
@each $keySize, $valueSize in $screen-breakpoints {
[visible-block-#{$keySize}] {
@media (min-width: $valueSize) {
display: block;
}
}
}
@each $keySize, $valueSize in $screen-breakpoints {
[visible-inline-block-#{$keySize}] {
@media (min-width: $valueSize) {
display: inline-block;
}
}
}
For Ionic users, a similar approach could be:
@each $breakpoint in map-keys($screen-breakpoints) {
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
// For floating the element based on the breakpoint, include `[hidden-{bp}]` attributes
[hidden#{$infix}] {
display: none !important;
}
}
}