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>

对于您的情况来说，这是最“优雅”的方式。如果您尝试在不克隆图像的情况下移动内容，您最终将使用更多代码，或者很有可能破坏其他内容。