You need to disable the floating of your column when you are dealing with media of small width. That is, if I inspect the element <div clas="col-1 left">...</div>
, go to the inspector in IE and disable the float rule for .left {...}
, everything looks like it probably should for mobile.
Floating objects I've found can be a bit tricky to deal with cross browser, so I only float items when you absolutely need to.
Edit: removed erroneous code.
Oddly enough, in your media rule for @media screen and (max-width:799px)
you have rules
.col-4.left,.col-3.right {
float: none;
clear: both;
}
.col-2.right {
float: none;
clear: both;
}
I wonder why something like
.col-1.left {
float: none;
clear: both;
}
isn't included?