更改浮動時，div不會以小分辨率更改位置

Question

我正在使我的網站具有響應性，並且dekstop版本的布局如下：

|    HEADER    |
<br>
| TEXT | IMAGE |
<br>
| IMAGE | TEXT |
<br>
| TEXT | IMAGE |

我想要的是：
在電話分辨率下，我進行了媒體查詢，以便所有圖像向左浮動，文本向右浮動。 像這樣：

|    HEADER    |<br>

|     IMAGE    |<br>
|     TEXT     |<br><br>
|     IMAGE    |<br>
|     TEXT     |<br><br>
|     IMAGE    |<br>
|     TEXT     |

它的實際作用是：
但是，它堅持使用html的布局，當我使用dekstop分辨率時，它的確將圖像的位置更改為左側，將文本更改為右側，但是當使用電話分辨率時，它將保留為原始格式，並且像這樣把它弄亂了：

|    HEADER    |
<br>
| TEXT |<br> IMAGE |
<br>
| IMAGE |<br> TEXT |
<br>
| TEXT |<br> IMAGE |

html / php代碼 （省略了php和內容）

<div class="productcol">

        <div class="productimg"> 

        </div>


        <div class="producteentweede">

            <div class="producttext">


            </div>

        </div>

    </div>

    <div class="productcol">

        <div class="producteentweede">

            <div class="producttext">


            </div>

        </div>

        <div class="productimg"> 

        </div>

    </div>

的CSS

        .productcol{
        width:100%;
        margin-left:0;
    }

    .producteentweede{
        width:50%;
        position:relative;
        float:left;
    }

    .productimg{
        width:50%;
        position:relative;
        float:left;
        height:30em;
    }


@media all and (max-width: 620px) {

    .producteentweede{
        float:right!important;
        display:block;
        width:100%;
    }

    .productimg{
        float:left!important;
        display:block;
        width:100%;
        height:22em;
    }
}

Answer 1

我認為您應該先更改HTML結構，然后使用CSS調整“全尺寸”布局和“移動”布局的布局。 您可以為圖像/文本元素分配類，以告訴它們是否應該向右或向左移動：

<div class="productcol">
    <div class="producteentweede right">
        <div class="producttext">

        </div>
    </div>
    <div class="productimg left">

    </div>
</div>
<div class="productcol">
    <div class="producteentweede left">
        <div class="producttext">

        </div>
    </div>
    <div class="productimg right">

    </div>
</div>

然后，您可以添加一些CSS以實現“全尺寸”布局。 因為已經修復了HTML結構，所以“移動”布局應該可以正常工作。

.producteentweede, .productimg{
    display:block;
    width:50%;
    height:10em;
    float:left;
}
.left {
    float: left;
}
.right {
    float: right;
}

這是結果的JSFiddle： https ://jsfiddle.net/mqszbej6/