Background: Refer to the image above. It represents a horizontal cross section of page displayed by web browser. It is implemented using zurb foundation xy grid. Notice edges of browser shown in red. Green areas show outer edges of grid cells in a row.
Challenge: Currently the responsiveness starts happening as soon as browser's outer edges start shrinking (due to user manually and gradually shrinking outer edge of browser). The requirement is to start responsive behavior to trigger only after outer edge meets & crosses over the cell edges shown in green. In other words, shrinking of browser width should first start eating away the area between red and green before responsive behavior sets in. Please let me know if anyone encountered this requirement and solved it using foundation xy grid features or any other means.