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

我想更改移动设备中元素的顺序（显示divs flex），初始结构已经完成，但是我发现很难对其进行自定义以满足移动设备的需求，有什么帮助吗？

最佳答案

这里的关键问题是flexbox order属性虽然功能强大，但不能将同级元素转换为子元素。只有javascript才能做到这一点。

这是一种使用CSS flexbox和CSS @media查询的方法，但是使用javascript（而不是flexbox order属性）在整个DOM中移动.div3，从而使其成为.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>