We use Bootstrap with default settings (i.e., 12 columns throughout using a fixed container, and 30px gutters between the columns). We also use default break points. I want to give my software designers grids that they can use for different sizes of device and since we are using Bootstrap's default breakpoints, then we have four sizes: >=1200px, >=992px, >=768px and <768px. For the smallest size, I'm basing designs on a 320px width (iPhone5).
Clearly, once we get down to 768px the Bootstrap defaults no longer works as design grids, but I'm not sure what to replace them with. The grid I choose needs to be a factor of 12, so that each column in the grid can be made up of multiple Bootstrap columns. I'm thinking of using a 4-column grid for the 768px, and 2 columns for the 320px, but would welcome any suggestions of best practices.