Media Queries vs JS Media Queries for changing layout

[VaseJS]

I've read your AMA to look for this question and found it but you have the same answer as you did in during a Q&A in another video/talk of yours. The one from the AMA was:

"How do you normally make ITCSS 'components' responsive? I've seen the use of responsive classes, but do you ever use media queries within your component's CSS?"

Your response was:

"If a specific component needs to have a different appearance over several breakpoints, I write MQs inside of it. Responsive classes are usually reserved for utilities where responsive behaviour can be abstracted."

However this doesn't address going from wide to narrow screen where the items may go from multiple columns to one.

I use the ITCSS meta framework but in all your videos or articles, I haven't found any examples in all my notes. It seems like changing o-col-10 (spanning 10 of the 24 columns of the grid) would not work with media queries changing o-col-10 to span more than 10 columns.

Is the problem my level of specificity? Should I have the column more generic like o-col-narraw, o-col-med and o-col-wide?

The other solution is to use JS to detect screen size and swap out the classes appropriately, e.g.:

function foo() {
if (window.innerWidth < 1024) {
/* change needed classes */
}
}
// Set up a listener
window.addEventListener('changesize', foo);