Сдвиньте колонку плавно в bootstrap4

Question

У меня есть три col-md-6, я только показываю box1 и box2 изначально, а когда пользователь нажимает BTN, я хочу показать box2 и box3.
НО я хочу сделать плавный переход слева от всех ящиков. Я пробовал jquery slide, но он не работает.

Как добиться плавного перехода ящиков влево?

function btnclick() {
  $("#box1").hide("slide", {
    direction: "left"
  }, 1000);
  $("#box3").show("slide", {
    direction: "left"
  }, 1000);
}

.box {
  height: 300px;
  border: black;
  border-style: dotted;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

</script>
<button onclick="btnclick()">BTN</button>
<div class="container-fluid">
  <div class="row">
    <div id="box1" class="box col-md-6">Box1</div>
    <div id="box2" class="box col-md-6">Box2</div>
    <div id="box3" class="box col-md-6" style="display:none;">Box3</div>
  </div>
</div>

Answer 1

function btnclick() {

  $('#box1').animate({
    width: 'toggle'
  }, 2000);
  $('#box3').animate({
    width: 'toggle'
  }, 2000);
}

.box {
  height: 300px;
  border: black;
  border-style: dotted;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button onclick="btnclick()">BTN</button>
<div class="container-fluid">
  <div class="row">
    <div id="box1" class="box col-md-6">Box1</div>
    <div id="box2" class="box col-md-6">Box2</div>
    <div id="box3" class="box col-md-6" style="display:none;">Box3</div>
  </div>
</div>

Answer 2

Попробуйте это:

$("#box1").hide("slideLeft");

ИЛИ

$("#box1").hide("slideUp");