IE8非浮动div在浮动右下方

Question

...前言

我正在考虑更新我的网站以使用Bootstrap 3并使用响应式布局。我注意到网站上使用的＃1浏览器（令人震惊）是Safari移动版。 IE8排名第5（仅次于Firefox）。因此虽然IE6 + IE7的总使用率为0.9％，但我没有支持它们的计划，但IE8仍然需要尝试解决这个问题。

问题......

我有三个div，其布局根据屏幕浏览器宽度而变化。 设置如下：

HTML：

<div class="col-sm-7">#1</div>
<div class="col-sm-5 floatright">#3</div>
<div class="col-sm-7">#2</div>

的CSS：

.floatright{float:right; clear: none;}
@media (max-width: 768px)
{    
    .floatright{float:none;}
}

关键是第二个div（＃3）在右边。

这里有一个问题解决了这个布局Possible to achieve this Mobile/Desktop layout using Bootstrap? (or other grid)

我遇到的问题是在IE8 div＃2 auto-clearfixes中。这就是内容不低于div＃1但是，低于div＃3

...警告

我正在使用IE10 - ＆gt; IE8兼容模式