html - 有没有办法在 Css 中重新排列 block (flex)的顺序

Question

我想在移动设备上更改我的元素(divs flex 显示)的顺序，初始结构已经完成，但我发现很难自定义它以满足我在移动设备上的需求，有什么帮助吗？

Answer 1

这里的关键问题是 flexbox 的 order 属性虽然很强大，但不能将兄弟元素变成子元素。只有 javascript 可以做到这一点。

这是一种使用 CSS flexbox 和 CSS @media 查询但使用 javascript(而不是 flexbox order 属性)移动 .div3 的方法 跨越 DOM，使其成为 .child-container 的子元素:

var narrowScreen = window.matchMedia("(max-width:600px)");
var screenIsNarrow = false;

var parentContainer = document.getElementsByClassName('parent-container')[0];
var childContainer = document.getElementsByClassName('child-container')[0];

var div1 = document.getElementsByClassName('div1')[0];
var div2 = document.getElementsByClassName('div2')[0];
var div3 = document.getElementsByClassName('div3')[0];


function checkScreenWidth() {

    if ((narrowScreen.matches) && (screenIsNarrow === false)) {
        childContainer.insertBefore(div3, div1);
        childContainer.insertBefore(div2, div3);
        screenIsNarrow = true;
    }

    else if ((!narrowScreen.matches) && (screenIsNarrow === true)) {
        childContainer.insertBefore(div1, div2);
        parentContainer.insertBefore(div3, childContainer);
        parentContainer.insertBefore(childContainer, div3);
        screenIsNarrow = false;
    } 

}


window.addEventListener('resize', checkScreenWidth, false);
window.addEventListener('load', checkScreenWidth, false);

.parent-container {
display: flex;
width: 90vw;
min-height: 200px;
font-size: 24px;
line-height: 200px;
text-align: center;
color: rgb(255, 255, 255);
}

.child-container {
display: flex;
flex: 1 0 74%;
padding: 24px 4vw;
margin-right: 1vw;
background-color: rgb(191,191,191);
}

.div1, .div2 {
flex: 1 1 45%;
margin: 3px 0.5vw;
background-color: rgb(83,83,83);
}

.div3 {
flex: 1 0 24%;
background-color: rgb(127,127,127);
}


@media only screen and (max-width:600px) {

.child-container {
display: inline-block;
}

.div1, .div2, .div3 {
margin: 6px;
}

}

<div class="parent-container">

    <div class="child-container">
        <div class="div1">One</div>
        <div class="div2">Two</div>
    </div>

    <div class="div3">Three</div>

</div>