html - 如何在 HTML 标签(div 标签的内部和外部)之间交换？我可以在我的案例中使用显示 :flex;? 吗

Question

我有一个网站，我正试图使其响应。一些 div 必须更改位置，如我之前的帖子所述:How to swap sides of 2 elements (one with float:left, the other is with float:right)

但这一次要复杂得多。

页面是这样的:

在左边的 div 上:一张图片。

在右边的 div 上:客户端的横幅，“挑战”，一些文本，“结果”，一些文本。 “阅读更多”链接。(在它之后有相同的结构，只是右边的图像和左边的文本 - 在 div 上使用 float )。

这是它在手机上的样子:首先是横幅 - 然后是图像 - 然后是文本的其余部分。

这是我的 HTML 结构:

<div class="cs"> 
    <div class="leftDiv">
        <img src="http://www.example.com/wp-content/themes/twentyfifteen-child/images/big-image.png">
    </div>
    <div class="rightDiv">
        <a href="http://www.example.com/clients/theClientsName-case-study/">
            <img src="http://www.example.com/wp-content/themes/twentyfifteen-child/images/banner.png" class="mini-logo-l">
        </a>
        <h1>The <span class="babyblue">Challenge</span></h1>
        <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text . </p>
        <h1>Our <span class="babyblue">Results</span></h1>
        <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text .</p>
        <p class="read-more text-yellow"><a href="http://www.example.com/clients/theClientsName-case-study/">Read more</a></p>
    </div>
</div>

正如您所注意到的，这些标签在桌面版的标签内，这没问题。但是当在移动设备上查看页面时，“左”和“右”div 中的许多标签必须交换位置。

这是一个 jsfiddle:http://jsfiddle.net/uh8L0g4t/

Answer 1

Here's the fiddle对于我在评论中描述的内容。我使用 !important 是因为您不必要地增加了元素的优先级，所以我懒得克隆它们以获得移动 View 中元素的优先级。

.desktop{
    display:block;
}
.mobile{
    display:none;
}
@media screen and (max-width:600px){
.desktop{
    display:none;
}
.mobile{
    display:block;
}
}

还有你的 HTML

<div class="left">
     <img class="mobile" ... />
</div>
<div class="right">
     <img class="desktop" ... />
</div>

对于您的情况，这是最“优雅”的方式。如果您尝试在不克隆图像的情况下四处移动东西，您将最终要么使用更多代码，要么极有可能破坏其他东西。