JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="dynamic-placeholder">Detect hover here</div>
  <div class="row">
    
    <!-- Start : Items -->
    <div class="col-xs-6 col-sm-4 col-md-3 card">
      <div class="inner">Item 1</div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 card">
      <div class="inner">Item 2</div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 card">
      <div class="inner">Item 3</div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 card">
      <div class="inner">Item 4</div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 card">
      <div class="inner">Item 5</div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 card">
      <div class="inner">Item 6</div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 card">
      <div class="inner">Item 7</div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 card">
      <div class="inner">Item 8</div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 card">
      <div class="inner">Item 9</div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 card">
      <div class="inner">Item 10</div>
    </div>
    <!-- End : Items -->
    
  </div>
</div>
<pre></pre>

SCSS

.row {
  margin-top: 15px;
  margin-bottom: 15px;
}

pre {
  position: fixed;
  bottom: 15px;
  left: 15px;
  right: 15px;
}


.card {
  margin-top: 15px;
  margin-bottom: 15px;

  .inner {
    height: 150px;
    line-height: 150px;
    background: #eee;
    text-align: center;
  }
}

.dynamic-placeholder {
  background: rgba(#f00, 0.3);
  height: 30px;
  line-height: 30px;
  text-align: center;
  opacity: 0;
  position: absolute;
}

JavaScript

(function($) {
	'use strict';
  
  // Count items per row
  function items_per_row($collection) {
    var count = 0;

    $collection.each(function() {
      var $this = $(this);

      if ($this.prev().length > 0) {
        if ($this.position().top !== $this.prev().position().top) {
          return false;
        } else {
          count++;
        }
      } else {
        count++;
      }
    });

    var last = count ? $collection.length % count : 0,
        rows = count ? Math.round($collection.length / count) : 0;
    if (last == 0) {
      last = count;
    }

    return {
      count: count,
      last: last,
      rows: rows
    }
  };
  
  // On card hover, print current row
  $('.card').hover(function() {
    var $card       = $(this);

    var item_count  = items_per_row( $('.card') ),
        index       = $(this).index(),
        current_row = Math.floor(index / item_count.count) + 1;

		$('pre').text( $card.find('.inner').text() + ' is in row '+ current_row );
  });
  


})(jQuery);