如何根据断点将HTML元素重新定位到层次结构的不同部分

Question

这是一些html和css，使用flexbox来定位元素(用黄色表示(。在大断点中，它出现在一个位置，但在小断点中，需要位于层次结构的不同部分。因此，这并不是简单地重新定位订单，而是将其转移到另一个地方。

我如何使用CSS和flexbox来实现这一点？如果这不可能，那么我可以使用CSS网格。我宁愿不必使用javascript，除非没有其他方法。

.one {
background-color: lightgray;
}
.two {
background-color: red;
}
.three {
background-color: blue;
}
.element {
background-color: yellow;
}

<h1>large breakpoint</h1>
<div>
<div style="display:flex">
<div class="one">
<div>one</div>
</div>
<div class="element">
possible position 1
</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
</div>
<h1>small breakpoint</h1>
<div>
<div style="display:flex">
<div class="one">
<div>one</div>
</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
<div class="element">
possible position 2
</div>
</div>

Answer 1

非常确定使用order属性可以实现您想要的。这里有一个例子，其中一个元素的顺序与声明它的顺序不同。

您可以在每个断点中设置order属性以满足您的需要。

.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
border: 0.025em solid black;
padding: 1em;
}
#special-item {
order: 3;
width: 100%;
background-color: yellow;
}

<h1>Large breakpoint</h1>
<div class="container">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four</div>
</div>
<h1>Small breakpoint</h1>
<div class="container">
<div class="item">One</div>
<div id="special-item" class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four</div>
</div>