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

＆＃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;

One

Two

Three

＆＃13;