Existe varias alternativas para darle solución a esto, aquí te dejamos la que encontramos nosotros y nos pareció la mejor.

$(document).on('shown.bs.collapse', function(event) {
  var item_height = event.target.clientHeight,
      window_height = window.innerHeight,
      offset_top = event.target.offsetTop,
      scroll_y = window.scrollY;
  
  if (scroll_y > (window_height - item_height)) {
    $('html, body').animate({
       scrollTop: ((window_height - item_height) / 2) + offset_top
    }, 1000);
  }
}

Paso a paso

1. Detectamos cada vez que ocurre el evento de collapse
2. Definimos las variables con las que vamos hacer nuestros cálculos
   item_height: Altura de nuestro componente
   window_height: Altura de la venta
   offset_top: Distancia de la parte de arriba entre componentes
   scroll_y: Valor del scroll en el eje Y
3. Si el valor del scroll en eje Y es mayor a la altura de nuestra venta menos el valor del componente quiere decir que el scroll ya fue recorrido hacia abajo y si es el caso entonces se presentará el fallo;
4. Hacemos que nos retorno hacia arriba procurando que la información del complemento desplazado quede centrada y visible en la ventana para el usuario

Referencias:

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

https://getbootstrap.com/docs/4.0/components/collapse/

https://stackoverflow.com/questions/31100690/using-bootstrap-data-toggle-collapse-and-scrollintoview-to-show-and-scroll-t

Esperamos que te pueda servir esta solución, si fue así déjanos tu comentario, bye

Pues bien, vamos a ver cómo se aplica esto en código, aquí nosotros estamos suponiendo que ya tienes integrado Bootrstrap a tu proyecto.

<div class="row">
    <div class="col-sm-6 order-sm-2">
        <!-- Aquí va lo del bloque B -->
    </div>
    <div class="col-sm-6 order-sm-1">
        <!-- Aquí va lo del bloque A -->
    </div>
</div>

Vista escritorio

Vista móvil

Referencias:

https://bootstrapclasses.com/bootstrap-push-pull-column-ordering-tutorial

https://getbootstrap.com/docs/4.0/layout/grid/#reordering

Si te sirvió el contenido, deja tu comentario o si quieres saber de algún otro tema escríbenos, bye.

<div class="form-group text-start">
   <button id="btn-save" type="submit" class="btn btn-primary">Guardar</button>
</div>

“text-star” hace que el contenido se cargue a la izquierda

<div class="form-group text-center">
   <button id="btn-save" type="submit" class="btn btn-primary">Guardar</button>
</div>

“text-center” hace que el contenido se centre

<div class="form-group text-end">
   <button id="btn-save" type="submit" class="btn btn-primary">Guardar</button>
</div>

“text-end” hace que el contenido se cargue a la derecha

También puedes usar las clases “text-left” y “text-right” en algunas versiones cambia su sintaxis pero su función es la misma.

Recuerda que para poder hacer uso de Bootstrap debes integrarlo a tu proyecto