JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap-theme.min.css">
<div class="container-fluid">
   <div class="form-group">
      <div class="input-group">
         <span class="input-group-addon">
            <i class="fa fa-search"></i>
         </span>
         <input class="form-control" id="search" type="text" placeholder="Search...">
      </div>
   </div>
   <div id="results">
      <div class="row">
         <div class="col-xs-4 col-flex col-visible">
            <div class="panel panel-default panel-search">
               <div class="panel-heading">
                  <h4 class="panel-title">AEClim</h4>
               </div>
               <div class="panel-body">
                  <img class="img-responsive img-thumbnail" src="http://placehold.it/250x150">
               </div>
            </div>
         </div>
         <div class="col-xs-4 col-flex col-visible">
            <div class="panel panel-default panel-search">
               <div class="panel-heading">
                  <h4 class="panel-title">AEMET</h4>
               </div>
               <div class="panel-body">
                  <img class="img-responsive img-thumbnail" src="http://placehold.it/250x150">
               </div>
            </div>
         </div>
         <div class="col-xs-4 col-flex col-visible">
            <div class="panel panel-default panel-search">
               <div class="panel-heading">
                  <h4 class="panel-title">AME</h4>
               </div>
               <div class="panel-body">
                  <img class="img-responsive img-thumbnail"...

CSS

.container-fluid {
   padding-top: 15px;
}

.panel-search {
   cursor: pointer;
}

.bg-green {
   background: #dff0d8;
}

JavaScript

function rowBreak(input) {
   $('.col-flex').hide();
   if (input) {
      $('.row').replaceWith(function() {
         return $(this).html();
      });
      $('.col-flex').wrapAll('<div class="row">');
   }
   $('.col-visible').each(function(i, e) {
      if (((i + 1) % 3 == 0) && ($(this).siblings().length != 2)) {
         var x = $('.col-visible:gt(' + i + ')');
         $('<div class="row">').append(x).insertAfter(this.closest('div.row'));
      }
   });
   $('.col-visible').show();
}

rowBreak(0);

$('#search').on('keyup', function() {
   $('.col-flex').removeClass('col-visible').hide();
   var s = $(this).val().toLowerCase();
   $('.col-flex').filter(function() {
      return $(this).find('h4').text().toLowerCase().indexOf(s) > -1;
   }).show().addClass('col-visible');
   rowBreak(s);
});

$('.panel-search').on('click', function() {
   $(this).toggleClass('panel-default').toggleClass('panel-success');
   $(this).find('.panel-body').toggleClass('bg-green');
});