如何使左/右图像/文本布局响应为上/下布局？

Question

我的网站上有一个功能部件/优点模块，它以桌面型宽度设置在图像左/文本右；文本左/图像右结构类型。

图片文字

文字图片

图片文字

您可以在这里看到-http://jsfiddle.net/thjz3qp9/

但是，当屏幕尺寸缩小到围绕智能手机的水平或更低时，我希望该部分折叠为文字布局上方的图像。

图片

单词

图片

单词

html的结构使这变得困难：

<div class="benefits-block">
    <div class="left>
        <img src="">
    </div>
    <div class="right">
        <p> ... </p>
    </div>
</div>
<div class="benefits-block">
    <div class="left>
        <p> ... </p>
    </div>
    <div class="right">
        <img src="">
    </div>
</div>

-创建以下场景：

图片

单词

单词

图片

-以较小的分辨率。如果您单击“设置”>“最终结果”，然后将浏览器的大小调整到该断点（或者您正在看手机），则可以在http://jsfiddle.net/thjz3qp9/上看到相同的提示。

当html本质上是<img> <p> <p> <img>时，如何在较大分辨率下具有左/右好处类型的结构，而在较小分辨率下却将其折叠成文本结构上方的图像？

Answer 1

从逻辑上讲，顺序应该首先是图像，然后是单词（例如在移动设计中），这就是您想要在HTML中使用它的方式。然后，使用CSS定位所需的块。

请尝试定位其中的图片：.benefits-left，而不是定位容器div（.benefits-left img）。这样，您可以告诉它根据容器类向左或向右浮动，而无需重新排列HTML。