Jak sprawić aby ukryc diva mającego klase i id ?

Cześć! Chcę za pomocą javascript ukryć diva o id="myDiv", ale funkcja niestety nie działa. Dopiero jak usunę klasę bootstrapową, funkcja ukrywa diva. Może ktoś wie jak pogodzić tą klasę i id ?

<p  onclick="myFunction()">Edit</p>

 <div class="row d-flex justify-content-center" id="myDiv">
            <button type="submit" class="btn btn-danger mb-3" name="signIn">Zapisz zmiany</button>
        </div>

<script>
    function myFunction() {
        var x = document.getElementById("myDiv");
        if (x.style.display === "block") {
            x.classList.add('d-none');
        } else {
            x.style.display = "block";
        }
    }
</script>

dodaj klasę 'd-none'

function myFunction() { 
var x = document.getElementById("myDiv");
 if (x.classList.contains('d-none') )
{ 
x.classList.remove('d-none'); 
} 
else 
{ 
x.classList.add('d-none'); 
} 
}

@gk1982:
Dalej nie działa xd. A nie powinno być tak.

 function myFunction() {
        var x = document.getElementById("myDiv");
        if (x.classList.contains('d-block') )
        {
            x.classList.remove('d-block');
            x.classList.add('d-none');
        }
        else
        {
            x.classList.add('d-none');
        }
    }

działa bez tego d-flex
https://www.w3schools.com/code/tryit.asp?filename=GOORBKHU79UC