Digamos que tengo seis<div> elementos dentro de un contenedor<div>. Cada uno de estos seis divs es un cuadrado y tiene el estilo CSSfloat: left aplicado. Por defecto, cuando llegan al borde del contenedor.<div> se envolverán

Ahora, mi pregunta es, usando Javascript, ¿es posible determinar en qué elemento está el ajuste?

Si se muestran en la página como:

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

Estoy tratando de determinar que la envoltura ocurre entre el segundo y tercer elemento. En caso de que se esté preguntando si he perdido la cabeza, la razón por la que estoy tratando de hacer esto es si se hace clic en una de esas casillas, quiero poder desplegar un área de información entre las filas con algunos jQuery de fantasía.

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

¿Alguna idea sobre cómo determinar dónde se produce la ruptura?

PD La razón por la que estoy flotando y dejando que se ajuste automáticamente es para hacer que responda. En este momento, si cambio el tamaño del navegador, se ajusta a las cajas en consecuencia. No quiero codificar los anchos de columna.

[EDITAR] Gracias a la respuesta proporcionada por Explosion Pills, pude encontrar una solución.

// 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++;
});

Esto dio como resultado lo siguiente en la consola:

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

Cuando tuve 30 cajas, que terminaron siendo 7 cajas de ancho y 5 filas (la última fila solo 2 cajas)