Lieroes

Советую не придумывать велосипед и обратиться к популярному фрейморвку Bootstrap :) он нам навязывает следующую сетку:

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Удачи ;)

$("body").on("click",  ".close-button", function () {
  const index = $(this).attr('id');
  $('.general_block_' + index).remove();
  $('.close-button').each(function( index ) {
    $(this).parent('div').attr('id', index);
  });
}

Но лучше так не завязывать хардкорно :) можно сделать иначе:

<div class="general_block" id="1"><div align="center"></div><div class="close-button"></div></div>
<div class="general_block" id="2"><div align="center"></div><div class="close-button"></div></div>
<div class="general_block" id="3"><div align="center"></div><div class="close-button"></div></div>
<div class="general_block" id="4"><div align="center"></div><div class="close-button"></div></div>

$("body").on("click",  ".close-button", function () {
  var closeButton = $(this);
  var generalBlock = closeButton.parents('.general_block');
  var alignedElement = generalBlock.find('.center');

  // тут уже можете делать, что хотите..
  generalBlock.remove();
}