我可以在不更改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,但遗憾的是没有运气.

这是一个演示.

演示链接在这里

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>