Html 较小屏幕尺寸的浮动问题

我正在试图找出最好的方法，让一个链接的图像浮动在它的旁边，这将迫使链接成为多行需要，同时保持图像浮动在它的旁边

我在这里设置了一个示例-

如果调整结果窗口的大小，您将看到，一旦它达到足够小的宽度，图像将落在链接下方

如何对其进行编码，使链接转到多行并使图像在其旁边浮动？

尝试将

标记置于

之前，并从

中删除

浮动：左

我已经编辑了JSFIDLE:
这个示例很有效：但是我将您的浮动更改为绝对定位img。如果这还不够好的话，@mediaquerys就是最好的选择。我试了两次，但没有成功。可能是用户错误
 您完全可以将图像放置在它们的行中，然后向
元素添加一些填充，这样链接就不会被图像覆盖：

.list img {
    position : absolute;
    right    : 10px;
}
.list h3 {
    float      : left;
    font-size  : 12px;
    padding    : 10px 60px 10px 0;/*notice the extra 50px of padding I added to padding-right*/
    min-height : 50px;/*Notice this is added beacuse the image will not dictate height since it is positioned absolutely*/
}

这是一个需要处理的JSFIDLE:
谢谢你的评论，我试过了，它只是把图像放在上面而不是下面，同样，如果我把图像放在H3中，结果也是一样的。你需要把它放在H3的前面并去掉“float:left；”才能工作。示例：@uber\u n00b检查jsfiddle链接，看看是否是您正在寻找的for@uber_n00b：当容器变得足够窄时，它最终会移动，因为图像的宽度是固定的。对于浮动的
h3
，请记住，如果浮动的元素没有在某处设置宽度，则浮动会变得扭曲。