css - Div 放置甚至在单个父级中，并将另一个 div 移动到中间

Question

<div class="sidebar">
   <div class="title"></div>
   <div class="related"></div>
</div>
<div class="description"></div>

如您所见，有 2 个父 div，sidebar 和 description，以及 sidebar 中的 2 个子 div。我已经为它们提供了 CSS 规则，如下图所示:

问题:如何在不更改标记的情况下使用这些标记制作这样的 View ？ :

*注意:如果窗口的宽度 <= 320px，第二个将是 View 。我使用了@media 查询，但问题是，title 和related 都在同一个父级(sidebar)中，所以这对我来说很难将它们分开并将 description 移到它们中间。

谢谢

Answer 1

这可能不是一个聪明的方法，但下面的代码可以解决您的问题:

HTML:

 <div class="sidebar">
     <div class="title"></div>
     <div class="description2"> description ...</div>
     <div class="related"></div>
 </div>
 <div class="description"> description ... </div>

CSS:

.description2{
    display:none;
}
@media only screen and (max-width: 320px) { 
    .description{
       display:none;
    }
    .description2{
       display:block;
    }
}

希望这对您有所帮助。