Missing visible-** and hidden-** in Bootstrap v4

Question

In Bootstrap v3 I often use the hidden-** classes combined with clearfix to control multi column layouts at different screen widths. For example,

I could combine mu

Answer 1

I do no expect that multiple div's is a good solution.

I also think you can replace .visible-sm-block with .hidden-xs-down and .hidden-md-up (or .hidden-sm-down and .hidden-lg-up to act on the same media queries).

hidden-sm-up compiles into:

.visible-sm-block {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}

.hidden-sm-down and .hidden-lg-up compiles into:

@media (max-width: 768px) {
  .hidden-xs-down {
    display: none !important;
  }
}
@media (min-width: 991px) {
  .hidden-lg-up {
    display: none !important;
  }
}

Both situation should act the same.

You situation become different when you try to replace .visible-sm-block and .visible-lg-block. Bootstrap v4 docs tell you:

These classes don’t attempt to accommodate less common cases where an element’s visibility can’t be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases.

.visible-sm-and-lg {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}