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

【问题标题】：Is there a way to re-arranging the order of blocks (flex) in Css有没有办法在 Css 中重新排列块（flex）的顺序
【发布时间】：2017-03-02 02:16:46
【问题描述】：

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

【问题讨论】：

如果您可以将所有三个元素排列在同一个 flex 容器中，这很容易。
是的，我知道，问题是初始布局已经完成，所以我不能再次更改它
请在问题中发布足够的代码以重现问题。
@hazam120 该代码将解释您迄今为止所做的尝试，因此我们不会觉得您在为您工作。
仅供参考，“flex”标签指的是 Adobe Flex。对于 CSS 问题，请使用“flexbox”。

标签： html css layout flexbox

【解决方案1】：

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

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

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>

【讨论】：

谢谢@Rounin，我想出了一种使用 jquery 的方法，使用 appendTo()，然后使用属性 order 使用 css 重新排序；)