如何在 HTML 标签之间交换（在 div 标签的内部和外部）？我可以使用 display:flex; 处理我的情况吗？

Question

我有一个网站，我正试图使其响应。一些 div 必须改变位置，正如我的老 post 中提到的那样：

但这一次要复杂得多。

页面是这样的：

左边div：一张图片。

右边div：客户端横幅，"the challange"，一些文字，"out results"，一些文字。 "read more" link。（在它之后有相同的结构，只是右边的图像和左边的文本 - 在 divs 上使用 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>

如您所见，标签在桌面版标签内，没问题。但是在移动设备上查看页面时 - "left" 和 "right" div 中的很多标签必须交换位置。

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

Answer 1

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

.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>

这是最适合您的情况的 'elegant' 方式。如果你试图在不克隆图像的情况下四处移动东西，你最终要么使用更多代码，要么很有可能破坏其他东西。

如何在 HTML 标签之间交换（在 div 标签的内部和外部）？我可以使用 display:flex; 处理我的情况吗？

How do I swap between HTML tags (inside and outside of div tags)? Can I work in my case with display:flex;?

html

css

flexbox