Bootstrap possui uma classe display
abreviadabreviada como "d-{breakpoint}-{value}" você pode usá-la para delimitar break-points.
<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>
Neste exmploexemplo 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/