Determine wrap location in floated elements

Let's say I have six <div> elements inside a container <div>. Each of these six divs is a square and have the CSS style float: left applied. By default, when they reach the edge of the container <div> they will wrap.

Now, my question is, using Javascript, is it possible to determine at which element the wrap is?

If they display on the page like:

 ___   ___
| 1 | | 2 |
----- -----
 ___   ___
| 3 | | 4 |
----- -----

I'm trying to determine that the wrap occurs between the second and third element. In case you are wondering if I have lost my mind, the reason I am trying to do this is if one of those boxes is clicked, I want to be able to drop down an info area between the rows with some fancy shmansy jQuery.

 ___   ___
| * | | ! |
----- -----
| Someinfo|
 ___   ___
| * | | * |
----- -----

Any ideas on determining where the break occurs?

P.S. The reason I am floating and letting it auto wrap is to make it responsive. Right now if I resize the browser, it wraps the boxes accordingly. I don't want to hard code column widths.

[EDIT] Thanks to the answer provided by Explosion Pills, I was able to come up with a solution.

// Offset of first element
var first = $(".tool:first").offset().left;
var offset = 0;
var count = 0;

$(".box").each(function () {

   // Get offset            
   offset = $(this).offset().left;

   // If not first box and offset is equal to first box offset
   if(count > 0 && offset == first)
   {
      // Show where break is
  console.log("Breaks on element: " + count);
   }

   // Next box
   count++;
});

This output the following in the console:

Breaks on element: 7 
Breaks on element: 14
Breaks on element: 21
Breaks on element: 28 

When I had 30 boxes, which ended up being 7 boxes wid