why bootstrap class d-sm-none still displays image in small screen

问题

I desire a row with 2 columns by using bootstrap4: 1st column takes size 9 in all viewports 2nd column takes size 3 in lg and md but disappears in sm viewport.

I tried the following with d-none/d-sm-none but it does not work as expected

      <div class="container">
        <div class="row">
          <div class="col-lg-9 col-md-9">
              <h1>Col-1: MD-9 or LG-9</h1>
          </div>
          <div class="col-lg-3 col-md-3 d-sm-none">
            <h1>Col-2: MD-3, LG-3, SM NONE</h1>
          </div>
          </div>
        </div>

d-none disappears 2nd column regardless the viewport size d-sm-none disappears 2nd column at lg and md but appear in sm..

here is the codepen Thanks.

回答1:

ok, I found the answer.

d-*-none/d-none is for hiding the element in the column, not the columns itself.. so the answer is

  <div class="container">
        <div class="row">
          <div class="col-lg-9 col-md-9">
              <h1>Col-1: MD-9 or LG-9</h1>
          </div>
          <div class="col-lg-3 col-md-3">
            <h1 class="d-sm-none d-md-block">Col-2: MD-3, LG-3, SM NONE</h1>
          </div>
          </div>
        </div>

Thanks.

来源：https://stackoverflow.com/questions/59299836/why-bootstrap-class-d-sm-none-still-displays-image-in-small-screen