how to change a CSS class using knockout based on bootstrap media sizes?

[Greg Veres]

Hi

I am trying to change from a horizontal button-group to a vertical button-group when the screen size matches the xs media size. 

I know I can use the css binding if I can set a value in my view model. I am thinking of using a computed in my view model and then having it fire when I detect a resize (with appropriate debouncing). 

but then I got thinking, is there a way to have a DOM element set a view model variable when it becomes visible? I guess I could create a new custom binding for that. But before I do, I was wondering if anybody knew of one? 

What I am thinking is using the xs-visible css class on a DOM element that has the custom binding. When custom binding would take as an argument, the computed to evaluate. When the binding was notified that the DOM element became visible, it would trigger the computed, which would then change the CSS.

Does that make sense? Or does anybody know of a better way to approach this? I have tried googling for an answer and I will continue but I came across a post pointing me to the forums so I figured I would ask.

Thanks

Greg