Can a grid have x2 columns on a mobile view?

Here's what I am trying to achieve: a row of icons on a horizontal row.

My approach is using a block and:

1. Creating a container
2. Then, create a grid with x6 columns
3. Then, add the icon in each column

This approach ^ works great in desktop + tablet, but on mobile, it looks a bit thin with a lot of white space on each side.

Ideally, I'd love to see a 2 column grid on mobile.

Can this be done or would I need some CSS to hide/show the containers?

I thought I could create TWO identical containers and hide one or the other depending on the media query with different arrangements...using something like this:

#content-desktop {
  display: block
}

#content-mobile {
  display: none
}

@media screen and (max-width:768px) {
#content-desktop {
  display: none
}
#content-mobile {
  display: block
  }
}

This alas didn't work...

Any suggestions, workaround?