html tabla – Datatable footer responsive

Tengo una tabla la cual tiene un footer que se llena con autosuma que calcula con datatable, todo bien hasta ahi. El detalle, es que al utilizar la opcion responsive, toma bien la cabecera y las filas de la tabla, pero el footer no lo toma responsivo y pierdo informacion de los totales. Aqui captura:

introducir la descripción de la imagen aquí

Entonces, lo que necesito es poder tener la misma responsividad que tengo en el body, tambien en el footer.

Dejo mi codigo de datatable que estoy empleando:

var clientes = $(‘#clientes’).DataTable({
“language”: datatableEspanol,
“responsive”: true,
“autoWidth”: false,
“order”: (( 2, “desc” )),
“columnDefs”:(
{
“targets”: ‘dt-formater’,
“render”: $.fn.dataTable.render.number(‘.’, ‘,’, 0, ‘$’)
}
),
“footerCallback”: function(tfoot, data, start, end, display) {
var api = this.api();

        api.columns('.dt-formater').every(function () {
            var sum = api
                .cells( null, this.index() )
                .render()
                .reduce(function (a, b) {
                    total = 0;
                    var x = parseInt(a) || 0;
                    var y = parseInt(b) || 0;
                    total = x + y;
                    return total;
                }, 0);
            var numFormat = $.fn.dataTable.render.number('.', ',', 0, '$').display;
            $(api.column(1).footer()).html('TOTALES:');
            $(api.column( this.index() ).footer()).html(numFormat(sum));
        });

    }
});

He buscado en toda la documentacion e internet y no he podido encontrar nada que me sirva.