我需要div内的元素在不同屏幕尺寸的div之外。
我目前已经重复了html并将其隐藏在某些视口中,这显然不太理想,但我不确定是否还有另一种方法可以做到这一点。
这是html桌面和平板电脑
<div class="container">
<div class="one">
<p>Content 1</p>
</div>
<p>Content 2</p>
</div>
这是移动所需的html
<div class="container">
<p>Content 1</p>
<p>Content 2</p>
</div>
这样我就可以在容器div中的所有项目上使用flexbox顺序
这是display:contents;
(https://caniuse.com/#feat=css-display-contents)的完美用例
display: contents
使元素的子元素看起来好像是元素父元素的直接子元素,忽略元素本身。当使用CSS网格或类似布局技术时应忽略包装元素时,这可能很有用。
.container {
display:flex;
}
.one {
display:contents;
}
.one p:first-child {
order:2;
}
<div class="container">
<div class="one">
<p>Content 1</p>
<p>Content 3</p>
</div>
<p>Content 2</p>
</div>
你可以尝试这个(如果你想):
<div class="container">
<div class="one d-none d-md-block">
<p>Content 1</p>
</div>
<p class="d-block d-md-none">Content 1</p>
<p>Content 2</p>
</div>
对于CSS部分:
.d-none {
display: none;
}
.d-md-none {
display: none;
}
.d-md-block {
display: block;
}
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
.d-none {
display: none;
}
.d-block {
display: block;
}
}
这种方法实际上来自Bootstrap。但是如果你不想使用它,你可以尝试将代码添加到你的HTML
和CSS
中。