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
![fullwidth layout](https://i.stack.imgur.com/mbjLq.jpg)

RESPONSIVE LAYOUT (the blue column is appearing over the top the green and red)
![responsive layout](https://i.stack.imgur.com/FoEDA.jpg)

Cheers