有没有办法在Css中重新排列块（flex）的顺序

Question

我想在移动设备中更改我的元素的顺序（divs flex显示），初始结构已经完成但是我发现在定制它时遇到困难以满足我在移动设备上的需求，有什么帮助吗？

Answer 1

这里的关键问题是flexbox order属性虽然功能强大，但却无法将兄弟元素转换为子元素。只有javascript可以做到这一点。

这是一种使用CSS flexbox和CSS @media查询但使用javascript（而不是flexbox order属性）在DOM中移动.div3的方法，以便它成为.child-container的子元素：

＆＃13;

＆＃13;

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);

＆＃13;

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

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;