如何在不更改html代码的情况下更改元素的顺序？

这些是3个

内联块和元素，这意味着它们将挨着彼此排序

这里有一把小提琴，可以观看现场的一切：


.wrapper{
背景：#fff；
宽度：100%
}
.第一要素，
.第二个要素，
第三名{
显示：内联块；
宽度：计算（100%/3）
}
.第一要素{
背景：#000；
颜色：#fff
}
.第二要素{
背景：灰色
}
第三名{
背景：#ddd
}
@介质（最大宽度：767px）{}

第一要素
第二要素
第三要素
您需要在
.wrapper
上使用
flex wrapp
，在儿童上使用
order

.wrapper {
  max-width: calc(100%/2);  //Just to keep your original width intact
  display: flex;
  flex-wrap:wrap;
}

.firstElement, .secondElement, .thirdElement{
    min-width:50%; //This will force your width to 50% of your wrapper class
}
.firstElement{ order: 1;}
.secondElement{ order: 2;}
.thirdElement{ order: 3;}


.wrapper{
背景：#fff；
最大宽度：计算值（100%/2）；
显示器：flex；
柔性包装：包装；
}
.第一要素，
.第二个要素，
第三名{
显示：内联块；
最小宽度：50%
}
.第一要素{
背景：#000；
颜色：#fff；
顺序：1；
}
.第二要素{
背景：灰色；
顺序：3；
}
第三名{
背景：ddd；
顺序：2；
}
@介质（最大宽度：767px）{}

第一要素
第二要素
第三要素
有多种方法可以在不改变HTML的情况下对元素重新排序

CSS flexbox提供了该属性。但是，flex可能不是一个好的选择，因为您希望一个元素跨越两行。下面将讨论您可能遇到的问题：





然而，CSS网格布局为您的问题提供了许多很好的解决方案。
order
属性在此处也可用，但不是必需的

这里有一个使用属性的解决方案


.wrapper{
显示：网格；
网格间距：5px；
网格模板区域：“第一个第二个第三个”；
}
.第一要素{
网格区域：第一；
背景：#000；
颜色：#fff
}
.第二要素{
网格面积：第二；
背景：灰色
}
第三名{
网格面积：第三；
背景：#ddd
}
@介质（最大宽度：767px）{
.包装纸{
网格模板区域：“前三个”
“第二和第三”；
}

第一要素
第二要素
第三要素
如果您不想使用flex，表布局属性可以提供帮助

玩或只是运行下面的演示


.wrapper{
背景：#fff；
宽度：100%；
}
.第一要素，
.第二个要素，
第三名{
显示：内联块；
最小宽度：33%；/*将用于mediaquerie。根据您自己的价值/需要进行调整*/
保证金：0.11%；/*如果需要*/
}
.第一要素{
背景：#000；
颜色：#fff；
}
.第二要素{
背景：灰色；
}
第三名{
背景：rgba（0,0,0,0.3）；
}
@介质（最大宽度：767px）{
.包装纸{
显示：表格；/*触发表格布局*/
}
.a{
显示：块；
保证金：2倍；
}
.b{
显示：表格单元格；/*使此单元格仅作为上一个单元格之外的单元格*/
}
}

第一元素第二元素第三元素
由于问题没有用flex或new tech标记，也没有包含在源代码中，因此这是一个反映以下内容的解决方案：

*请注意，为了获得视觉效果，我将元素的宽度更改为100%/3.1，您可以根据需要进行更改


.wrapper{
背景：#fff；
位置：相对位置；
宽度：100%；
高度：500px；
}
.第一要素，
.第二个要素，
第三名{
显示：内联块；
宽度：计算（100%/3.1）
}
.第一要素{
背景：#000；
颜色：#fff；
身高：33%；
}
.第二要素{
背景：灰色；
身高：33%
}
第三名{
背景：ddd；
身高：33%
}
@介质（最大宽度：767px）{
.firstElement、.secondElement、.thirdElement{
宽度：50%；
}
.第一要素{
浮动：左；
}
.第二要素{
位置：绝对位置；
左：0；
底部：0；
}
第三名{
浮动：左；
身高：100%；
}
}

第一要素
第二要素
第三要素
您可以轻松地使用定位，它具有强大的支持，并且可以选择与CSS变量组合，后者的支持正在增加，而且无论如何都不是很小：


：根目录{
--FirstElement高度：50px；/*调整*/
--第二元件高度：50px；/*调整*/
--thirdElementHeight:calc（var（-firstElementHeight）+var（-secondElementHeight））；/*其他同级高度之和，以便“列”始终匹配*/
}
.第一要素，
.第二个要素，
.thirdElement{显示：内联块；宽度：33.33%}
.firstElement{背景：#000；颜色：#fff}
.secondElement{背景：灰色}
.thirdElement{背景：#ddd}
@介质（最大宽度：767px）{
.wrapper{位置：相对}
.firstElement{height:var（--firstElementHeight）}
.secondElement{height:var（--secondElementHeight）；position:absolute；left:0；top:var（--firstElementHeight）}/*按.firstElement的高度向下移动*/
.thirdElement{height:var（--thirdElementHeight）}
}

第一要素
第二要素
第三要素
使用Flex order.Flex是一个不错的选择，但这取决于你的项目。你需要支持旧浏览器吗？顺便问一下，这是一个为新用户编写的很好的问题。@DhavalJardosh，你能给我举个例子吗？@soulshined，当然，如果不更改html就可以做到，并且支持旧的浏览器，这将是非常重要的great@Vucko，因为如果屏幕宽度大于767px，则3个元素应相邻