Conflict using Bootstrap's display property d-none d-md-block and d-flex

In the following code block bootstrap classes d-none d-md-block are cancelling d-flex. I need to not show this block on anything lower than md but also be able to set d-flex so that bootstraps align-self-end class works, (which currently it does not). How do I get these to play nicely together? Or is there another solution?

<div class="col-md-6 col-sm-12 custom-right d-none d-md-block d-flex">                              
   <h2 class="align-self-end">Title Here</h2>                       
</div>