CSS HTML与div的浮动问题

Question

我遇到了HTML / CSS的一些问题。我希望将div之后的数字浮出来。但是最后一个div并没有浮动我想要的方式。这很难解释，所以我把我的代码放在JSFiddle上：

基本上，我的HTML看起来像这样：

<ul>
  <li>
    <div class="product-image"></div>
    <div class="product-title"></div>
    <div class="product-description"></div>
    <div class="product-spec"></div>
    <div class="product-offer"></div>
  </li>
</ul>

包括CSS的完整示例：http://jsfiddle.net/6r46B/

在包含这些div的图片下方以及我希望它们如何对齐：

这里的问题是div .product-offer位于div .product-spec右侧。但我一直想要它。我该怎么做？

PS：此部分将用于响应式设计。这将是一个广泛的例子。

Answer 1

让product-offer成为DIV顺序中的第一个元素，以优先于浮动顺序。