You’ll need the html5shiv for ie8 and under or they won’t recognise the new html5 elements that you are using.
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Don’t forget the html5 doctype or that will render ie9 and under as though they were almost ie5.
It may be worth forcing the issue with the edge meta tag at the top of the head of the page.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
You can’t wrap block elements in a span so change the element to a div instead. This is where you have closed the span:
</div>
</footer>
</span>
IE8 and under doesn’t suport media queries so you need to add support via a script. Combine it with the shiv:
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
More info on the bootstrap home page.
The above should get ie8 and 9 back into shape but IE7 is likely to need specific tweaks and I don’t believe ie7 and under is supported in bootstrap anyway (which is what you seem to be using).
