Javascript 只有当浏览器宽度一定时，才有可能改变div的顺序（不仅仅是美观）？

假设我有HTML，比如：

<div class="outer">
    <div class="inner">
    </div>
</div>

这可能吗？

---

如果是这样，我将如何实现它？

您需要Javascript来实现这一点

用作我们的

@媒体

查询

const x = window.matchMedia('(min-width: 890px) and (max-width: 958px)');

function mediaQuery(x) {
    if (x.matches) { // If media query matches
        const first = document.querySelector(".outer");
        const second = document.querySelector(".inner");
        first.className = "inner";
        second.className = "outer";
    } else {
        // do nothing
    }
}

mediaQuery(x)

---

这需要Javascript

用作我们的

@媒体

查询

const x = window.matchMedia('(min-width: 890px) and (max-width: 958px)');

function mediaQuery(x) {
    if (x.matches) { // If media query matches
        const first = document.querySelector(".outer");
        const second = document.querySelector(".inner");
        first.className = "inner";
        second.className = "outer";
    } else {
        // do nothing
    }
}

mediaQuery(x)

---

您可以使用

order

属性
像这样

div#myRedDIV{顺序：2；}
div#myBlueDIV{顺序：4；}
div#myGreenDIV{顺序：1；}
div#myPinkDIV{顺序：3；}
@介质（最大宽度：600px）{
div#myRedDIV{顺序：4；}
div#myBlueDIV{顺序：2；}
div#myGreenDIV{顺序：3；}
div#myPinkDIV{顺序：1；}
}
#主要{
宽度：400px；
高度：150像素；
显示器：flex；
}
#主要部门{
宽度：50px；
高度：100px；
}

---

您可以使用

order

属性
像这样

div#myRedDIV{顺序：2；}
div#myBlueDIV{顺序：4；}
div#myGreenDIV{顺序：1；}
div#myPinkDIV{顺序：3；}
@介质（最大宽度：600px）{
div#myRedDIV{顺序：4；}
div#myBlueDIV{顺序：2；}
div#myGreenDIV{顺序：3；}
div#myPinkDIV{顺序：1；}
}
#主要{
宽度：400px；
高度：150像素；
显示器：flex；
}
#主要部门{
宽度：50px；
高度：100px；
}

---

您可以执行以下操作：

.outer>.inner{
//某种风格
}
@介质（最小宽度：890px）和（最大宽度：958px）{
.inner>.outer{
//某种风格
}
}

---

您可以执行以下操作：

.outer>.inner{
//某种风格
}
@介质（最小宽度：890px）和（最大宽度：958px）{
.inner>.outer{
//某种风格
}
}

是否要为样式重新排序？无法从样式重新排序。为此，您必须使用javascript/jquery，我使用的模板中的jquery在特定浏览器宽度上使用了breaks样式，除非div在HTML中的顺序不同。好的，我正在研究JS解决方案。我认为您可能没有以正确的方式解决问题。HTML应用于描述页面内容，CSS应用于设计页面样式。视口的宽度不应改变页面的内容，因此HTML不需要重新排序。如果需要切换不同元素的位置，应查看flexbox和css网格的order属性。：）是否要为样式重新排序？无法从样式重新排序。为此，您必须使用javascript/jquery，我使用的模板中的jquery在特定浏览器宽度上使用了breaks样式，除非div在HTML中的顺序不同。好的，我正在研究JS解决方案。我认为您可能没有以正确的方式解决问题。HTML应用于描述页面内容，CSS应用于设计页面样式。视口的宽度不应改变页面的内容，因此HTML不需要重新排序。如果需要切换不同元素的位置，应查看flexbox和css网格的order属性。：）不，你不能。您不能使用

顺序

更改父项和子项。不……您不能。您不能使用

顺序

更改父项和子项。