How to hide element for mobile device with bootstrap4? [duplicate]

Question

Currently I am creating a bootstrap 4 based site and wanted to optimize this for mobile devices. How can I not display an element for certain screen sizes?

Normally I use ".hidden-sm-down" as documented here: https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

I also tried alternatives like: .d-none .d-md-block .d-xl-none or hidden.

<div class="col-lg-4 order-lg-1 .d-none .d-sm-block">
   <div class="card-profile-image">
      <a href="#">
        <img src="myimage.ong" alt="" class="rounded-circle">
      </a>
   </div>
</div>

Currently it is possible to hide the element with .d-none for all devices but I only want to hide it for xs and sm.

Answer 1

Currently it is possible to hide the element with .d-none for all devices but I only want to hide it for xs and sm.

This should work for you

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

Bootstrap 4.x display cheat sheet

| Screen Size        | Class                          |
|--------------------|--------------------------------|
| Hidden on all      | .d-none                        |
| Hidden only on xs  | .d-none .d-sm-block            |
| Hidden only on sm  | .d-sm-none .d-md-block         |
| Hidden only on md  | .d-md-none .d-lg-block         |
| Hidden only on lg  | .d-lg-none .d-xl-block         |
| Hidden only on xl  | .d-xl-none                     |
| Visible on all     | .d-block                       |
| Visible only on xs | .d-block .d-sm-none            |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block            |

Also check my answer on a related question - Hiding elements in responsive layout?