html - 我可以在不更改 HTML 的情况下重新排序这些 div 吗？

Question

我有一个电子商务平台，其产品图片显示在 DOM 中的产品标题和描述之前。我无权更改他们的 HTML，但我想知道是否可以使用 CSS 重新排序这些元素？

这是 HTML

<div id="wrapper">
  <div id="img">Img</div> 
  <div id="Content">
     <div id="title">
       Title
     </div>
     <div id="description">
       Description
     </div>
  </div>
</div>

我试图让#content 高于#img，但很遗憾没有运气。

这是一个演示。

Demo Link Here

Answer 1

你可以使用 flexbox 来做到这一点:

div {
  margin:2px;
}
#wrapper {
  background-color:red;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:column;
  -webkit-flex-direction:column;
  flex-direction:column;
}
#img {
  background-color:blue;
  height:100px;
  width:100px;
  -ms-flex-order:2;
  -webkit-order:2;
  order:2;  
}
#title {
  background-color:yellow;   
}
#description {
  background-color:green;
}
#Content {
  -ms-flex-order:1;
  -webkit-order:1;
  order:1;  
}

<div id="wrapper">
  <div id="img">Img</div> 
  <div id="Content">
    <div id="title">Title</div>
    <div id="description">Description</div>
  </div>
</div>