半ばメモ用途です。md未満の場合は常に1カラム構成になり、ボタンで2領域が切り替わります。
<!DOCTYPE HTML>
<html>
<head>
<title >2カラム1カラム表示切替サンプル</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-6" id="left-section">
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-outline-primary text-primary" id="btn-hide-left"><i class="fa fa-angle-double-left fa-lg pr-2"></i>領域1を隠す</button>
</div>
<div class="">領域1</div>
<p>狭い画面（xs, sm）では領域1のみ、広い画面（md以上）では領域1, 2の両方表示する。</p>
</div>
<div class="bg-success d-none d-md-block col-md-6" id="right-section">
<div class="d-flex justify-content-start">
<button type="button" class="btn btn-primary" id="btn-show-left" style="display: none">領域1を表示<i class="fa fa-angle-double-right fa-lg"></i></button>
</div>
<div class="">領域2</div>
</div>
</div>
</div>
</body>
<script>//<![CDATA[
$(document).on('click', '#btn-hide-left', function() {
// 左 d-none // 右 col-12
$('#left-section')
.removeClass('col-12 col-md-6')
.addClass('d-none');
$('#right-section')
.removeClass('d-none d-md-block col-md-6')
.addClass('col-12');
$('#btn-show-left').show();
$('#btn-hide-left').hide();
});
$(document).on('click', '#btn-show-left', function() {
// 左 col-12 col-md-6 // 右 d-none d-md-block col-md-6
$('#left-section')
.addClass('col-12 col-md-6')
.removeClass('d-none');
$('#right-section')
.addClass('d-none d-md-block col-md-6')
.removeClass('col-12');
$('#btn-show-left').hide();
$('#btn-hide-left').show();
});
//]]></script>
</html>