Bootstrap possui uma classe `display` abreviada como **"d-{breakpoint}-{value}"** você pode usá-la para delimitar break-points.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>


    <div class="container">
      <div class="col-12 d-md-none">
        Essa desaparece quando chegar em md
      </div>
      <div class="col-12 d-none d-md-block">
        Essa ocupa todas as 12 colunas quando chegar em md
      </div>
    </div>

<!-- end snippet -->


Neste exemplo basta clicar em executar e depois click em "Página toda" para ver a primeira `<div>` desaparecer.

----------

Referencia : [https://getbootstrap.com/docs/4.0/utilities/display/](https://getbootstrap.com/docs/4.0/utilities/display/)