Colspan on Bootstrap

Olá, tenho a seguinte tabela no meu projeto.

O que estou tentando fazer, é que quando chega na media queria do mobile, eu dou um "hide" nessa td (da segunda linha):

<td><i class="fa fa-info-circle info-icon" aria-hidden="true"></i> Despesa Médica Hospitalar Total</td>

e dou um display block (pra aparecer) nessa tr (primeira tr do código):

<tr class="comp-table-titulo">
            <td colspan="4"><i class="fa fa-info-circle info-icon" aria-hidden="true"></i> Despesa Médica Hospitalar Total</td>
         </tr>

Acontece que a primeira TD da Segunda Tr fica com a mesma largura da única TD da primeira TR.

Já tentei usar:

<td colspan="4"></td>

Nessa única td pra ocupar a largura de todas as linhas.

E ver se consequentemente a primeira td da segunda linha fica na mesma largura das outras, mas esse colspan nem se quer esta funcionando!

As tabelas do bootstrap não aceitam coolspan nas tds?

<div class="table-responsive">
    <table class="table table-striped with-responsive-wrapper plans tabela-comp-planos">
      <thead>
      </thead>
      <tbody>

          <tr class="comp-table-titulo">
            <td colspan="4"><i class="fa fa-info-circle info-icon" aria-hidden="true"></i> Despesa Médica Hospitalar Total</td>
          </tr>

          <tr>
            <td><i class="fa fa-info-circle info-icon" aria-hidden="true"></i> Despesa Médica Hospitalar Total</td>

              <td class="text-center">EUR 55.000</td>

              <td class="text-center">USD 40.000</td>

              <td class="text-center">EUR 55.000</td>

              <td class="text-center">EUR 55.000</td>

      </tr>
</tbody>
</table>