Bootstrap: Bootstrap 4 beta3 replace “hidden-md-down hidden-md-up” by “d-block d-md-none” cause some problem

[xiuno]

<div class="d-block d-md-none"> I want only show in small screen ... </div>
<td class="d-table d-md-none"> I want only show in small screen ... </td>
<div class="d-flex d-md-none"> I want only show in small screen ... </div>

In this way, we need to know the display type of this element in advance, and if you set up a d-block for a TD, this TD will become very strange. So we suggest using the following way, so that it is easy to remember, and will not change the original properties of display.
By the way of free combination:

<div class="hidden-sm hidden-md">Hidden in small and middle screen </div>
<div class="hidden-md hidden-lg">Hidden in middle and large screen </div>

The big screen lets the user toss itself, as a framework to compromise and trade-offs, convenience and simplicity is bigger and better.

@media (max-width: 576px) {
  .hidden-sm { display: none !important; }
}
@media (min-width: 576px) and (max-width: 992px){
  .hidden-md { display: none !important; }
}
@media (min-width: 992px) {
  .hidden-lg { display: none !important; }
}

[Johann-S]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.

[xiuno]

This is an improvement proposal, not a BUG Report.
hope to add .hidden-sm .hidden-md .hidden-lg class

[mdo]

We won't be going back to the hidden classes—display utilities are the path forward. Looking at your original code snippet, you don't need the first display utility. These are functionally the same thing because <div>s are inherently display: block;. No need to set what spec/browser provide.

<div class="d-block d-md-none">...</div>
<div class="d-md-none">...</div>

If you're _changing_ the initial display value, then yes, you will need both classes. For example, if you wanted an inline to none or a none to block:

<div class="d-inline d-md-none">...</div>
<div class="d-none d-md-block">...</div>

[xiuno]

thanks for your reply, I fully understand what you mean and think:

<div class="d-block d-md-none">...</div>
<div class="d-md-none">...</div>
----
<div class="d-inline d-md-none">...</div>
<div class="d-none d-md-block">...</div>

This is not a problem. The problem is that I need to know the display attribute of the element beforehand. I think it can be simpler and more convenient:

<div class="hidden-sm">...</div>
<div class="hidden-sm hidden-md">...</div>
<div class="hidden-md hidden-lg"></div>

hidden-xx = hidden-xx-only
This combination of writing is easy to remember and understand, and it is not very long.

The following is a failed design that is too complex:
https://bulma.io/documentation/modifiers/responsive-helpers/#hide

I also think it is a less perfect design, too complex：
hidden-xxx-up hidden-xxx-down