How many columns should be used for small screen devices?

Question

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.

Answer 1

There is no hard rule or "best number" for the number of columns used in a design for small screens like the 320px screen you mention.

Generally 1-2 columns are used for this width as it keeps things readable and clickable, but it depends fully on the design and content of each section as for what number of columns to use. It can even vary from section to section if needed, which is very common.

Answer 2

There is no restriction though

Mostly 4 columns are used for a mobile responsive system.

It varies from device to device. For a better understanding, you may use this link.