Bootstrap 3 - weird floating issue with 3 column responsive layout

Bootstrap 3 - weird floating issue with 3 column responsive layout

I have a problem with a three column layout in bootstrap 3.
When in Full Desktop View, I have a standard 3 col layout, but on
responsive, I have the 3rd column placed underneath and full width.
The problem I'm getting is that, on responsive, the 3rd column is becoming
100% height and overlapping the other 2 columns above.
See screenshots below.
I've replicated a simple example below.
<div class="row">
<div class="col-sm-2 col-lg-2"></div>
<div class="col-sm-8 col-lg-8"></div>
<div class="col-sm-12 col-lg-2"></div><!--full with on responsive view-->
</div>
Is this a known issue with bootstrap3? Or is my markup wrong?
DESKTOP LAYOUT
RESPONSIVE LAYOUT (the blue column is appearing over the top the green and
red)
Cheers