Need a CSS guru please

For the life of me, can’t figure out why the individual elements in the color pickers on my product pages are not displaying consistenly on smaller mobile screens.

See this little vid to see the issue: http://recordit.co/ESkyYjEKRM

We’ve gone over the CSS & media queries but just cant seem to find what is causing this odd re-assortment of those elements when the screen is resized.