Breakpoint 1

cellsPerRow: 5,
cellHeight: 100

Breakpoint 2

cellsPerRow: 4,
cellHeight: 130

Breakpoint 3

cellsPerRow: 2,
cellHeight: 160

Breakpoints.

This example has 50 cells and 3 breakpoints - so 4 different layouts.
The cells have absolute positioning percentage wdth and fixed height.

Reduce your screen width to the breakpoint to see the cells reordering with a nice elastic animation.

Check the code

// When DOM is ready.
$('.thegrid').grid(
{
    grid: '.thegrid',
    cells: '.cell',
    cellHeight: 100,
    cellsPerRow: 7,
    animationPlatform: 'js',
    animationSpeed: 1200,
    animationEasing: 'easeOutElastic',
    breakpoints:
    {
        1199:
        {
            cellsPerRow: 5,
            cellHeight: 100
        },
        767:
        {
            cellsPerRow: 4,
            cellHeight: 130
        },
        479:
        {
            cellsPerRow: 2,
            cellHeight: 160
        },
    }
});