Wrapping columns in IE8 using Bootstrap 3 and Respond.js

Question

I know this is an old one, but I'll answer just to keep it from going unanswered. First, the "container" and "row" classes are reversed; whereas the container should be used to wrap the row(s). Second, as joeldown mentions above, the page needs the following in the document head: <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Here is a simplified HTML file that solves the question. Anyone implementing it will need to adjust paths to the CSS and script, of course. Tested on FF 17, Chrome 30, and IE8...

<!DOCTYPE HTML>

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap Sample</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jQuery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
    <script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-4" style="background:red;">
            &nbsp;
        </div>
        <div class="col-sm-4" style="background:green;">
            &nbsp;
        </div>
        <div class="col-sm-4" style="background:blue;">
            &nbsp;
        </div>
    </div>
</div>
</body>
</html>