bootstrap 4 list items that have d-flex class do not respond to .hide()?

it doesn't work beacause .d-flex uses !important, which overrides the display: none which is added on the target element by the hide() function'.

Since you intend to hide the element, I don't think removing the d-flex class will be a problem.

$('.hide').click(function(){
  $(".my-flex").removeClass("d-flex").addClass("d-none");
});

So when you intend to show the element again you can use

$('.show').click(function(){
  $(".my-flex").addClass("d-flex").removeClass("d-none");
});

Alternatively, you can add a parent element which you can then hide and show at any time

.d-flex uses !important which overrides the display: none which hide() puts on the element.

You could put containers within your li (I've used divs in example fiddle) and add .d-flex onto them so display: none on the li won't be overridden.

Fiddle here