Change table by div col-md in jquery / filter

Good day I'm using a search engine with a filter in jquery but that only works with tables. And with the tables I find it difficult to make it responsive on mobile devices. Since I can not give fixed size or adapt them, and I would like you to read instead of a table a div class=col-md-x to be able to make it responsive with bootstrap. I appreciate any help here I leave the code.

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#table tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

And the data comes from the db but it does not matter and I show you here ..

<div class="container">
<div class="row">
<div class="card-columns">
    <table id="table" class="table table-striped">
      <?php
        $arraySpecialist = Specialist::all();
        for ($i = 0 ; $i < count($arraySpecialist); $i++){ ?>
        <tr><td>
        <div id="card" class="card" style="position: relative;width: 100%;">
        <img class="card-img-top" alt="Card image cap" height="290" src="{{ $arraySpecialist[$i]['ruta'] }}" >
        <div class="card-body">
            <h5 class="card-title text-center">  {{ $arraySpecialist[$i]['name'] . ' ' . $arraySpecialist[$i]['lastName']}}</h5>
             <p class="card-text text-center">{{ $arraySpecialist[$i]['city'] }}</p>
             <p style="display:none" class="card-text text-center">{{$arraySpecialist[$i]['category']}}</p>
             <p style="display:none" class="card-text text-center">{{$arraySpecialist[$i]['subCategory']}}</p>
            <p id="card-text" class="card-text text-center" style="color: #fd7c68; font-weight: bold">{{ $arraySpecialist[$i]['specialty'] }}   </p>
            <?php $points = $arraySpecialist[$i]['points'];
            if(empty($points)){?>
                    <div style="background:#cc4a5e; height:30px;width:100%;color:white;text-align:center;font-weight:bold;border-style:solid;border-width:1px;border-color:#c1253d;border-radius:3px;">Sin puntuar aún</div>
            <?php }
            if($points >=9 && $points <=9.6){ ?>
            <div style="  display: flex;align-items: center;">
              <div style="margin: 0 auto">
                <img height="30" width="30" src="../img/Estrella.png" />
                <img height="30" width="30" src="../img/Estrella.png" />
                <img height="30" width="30" src="../img/Estrella.png" />
                <img height="30" width="30" src="../img/Estrella.png" />
                <img height="30" width="30" src="../img/Estrella-90.png" />
              </div></div>
                <?php }?><br>
             <div style="display: flex;align-items: center;">
                <div style="margin: 0 auto">
                    <form action="/perfilSpecialist" method="get">
                        <input type="hidden" name="idSpecialist" value="{{ $arraySpecialist[$i]['id'] }}" />
                        <input type="submit" value="Ver perfil" class="btn btn-info" />
                    </form>
                </div>
             </div>
        </div>
        </div></td></tr>

    <?php } ?>
        </table>
</div></div></div>