Using CSS to Moving Columns Based on Screen Width

Question

Here's a link to the page that's in development:

http://cybercacher.com/test/about-me/

If you scroll down to the very bottom you will see a list of links - there's 4 columns in the normal view. When you make the screen smaller, it puts all of them into one column.

I do want it to put them into a single column on an iPhone, for example. However, based on the screen size it should show them as 4 columns, then 2 columns, then 1 column.

Right now it's only showing as 4 columns or as 1 column, but it won't show like this:

I've tried playing around with the CSS to see how to do this but can't seem to figure it out. I'd prefer to do this with just CSS if possible. Any help would be greatly appreciated!

Answer 1

I see:

col-lg-3 col-md-3 col-sm-3

Try to use:

col-sm-6 col-md-3

instead.