如何使左/右圖像/文本布局響應為上/下布局？

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定位所需的塊。

除了定位容器div（ .benefits-left ）之外，還可以嘗試定位其中的圖像： .benefits-left img 。 這樣，您可以告訴它根據容器類向左或向右浮動，而無需重新排列HTML。