Как сохранить положение столбца, когда прячешь предыдущий?

Question

У меня есть строка с тремя столбцами и кнопкой. Когда я нажимаю на кнопку, второй столбец скрывается, а третий занимает его место. Как заставить третий столбец остаться в том же положении, в котором он находился до того, как скрыть второй? Вот мой код:

 <div class="row">
  <div class="col-3">
   Column 1
  </div>
  <div class="col-3 test">
   Column 2
  </div>
  <div class="col-3">
   Column 3
  </div>
 </div>
<button id="btn">
 Hide column 3
</button>

$('#btn').click(function(){
 $('.test').hide();
});

Answer 1

Вместо hide используйте

 $('.test').css('visibility', 'hidden');

, вы также можете использовать .css('opacity', '0')