使用css更改移动视图中元素的顺序

我需要在移动视图中使用css更改元素的顺序。请参考下面的代码

<div class="container">
  <aside>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar sapien a erat lacinia, in consequat metus tincidunt. Morbi rhoncus, odio ac im</p>
    <a href="">Link</a>
  </aside>
  <span>This line should come after heading.</span>
</div>

这一行应该在标题之后。

仅使用CSS无法更改它 如果可以使用jquery，可以尝试使用.append（）函数之类的函数

function checkPosition() {
if (window.matchMedia('(max-width: 767px)').matches) {
    //...
} else {
    //...
}
});

如果你没有机会使用jQuery，你需要重新构造你的HTML，你可以这样做

<div class="container">
    <aside>
    <h2>Heading</h2>

    <span id="spn1" style="display:none">This line should come after heading.</span>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar 
 sapien a erat lacinia, in consequat metus tincidunt. Morbi rhoncus, odio ac 
 im</p>
  <a href="">Link</a>
  </aside>
  <span id="spn2">This line should come after heading.</span>
</div>

---

尝试使用媒体查询切换类

@媒体屏幕和（最大宽度：600px）{
.表演暴徒{
显示：块；
}
.表演{
显示：无；
}
}

这一行应该在标题之后。

您可以执行以下操作：

<div class="container">
  <aside>
    <h2>Heading</h2>
    <span class="show-on-mobile">This line should come after heading.</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar sapien a erat lacinia, in consequat metus tincidunt. Morbi rhoncus, odio ac im</p>
    <a href="">Link</a>
  </aside>
  <span class="hide-on-mobile">This line should come after heading.</span>
</div>

@仅媒体屏幕和（最大宽度：768px）{
.集装箱{
显示：内联块；
宽度：100%；
}
旁白{
宽度：100%；
显示：内联块；
}
.container h2{位置：相对；边距底部：20px；}
.container p{填充顶部：30px；}
跨度{
宽度：100%；
位置：绝对位置；
左：0；
顶部：60px；
填充：10px；
}
}

这一行应该在标题之后。

你能修改HTML吗？不，不能修改HTML

<div class="container">
  <aside>
    <h2>Heading</h2>
    <span class="show-on-mobile">This line should come after heading.</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar sapien a erat lacinia, in consequat metus tincidunt. Morbi rhoncus, odio ac im</p>
    <a href="">Link</a>
  </aside>
  <span class="hide-on-mobile">This line should come after heading.</span>
</div>

.container {
  display: inline-block;
  width: 100%;
}

aside {
  width: 50%;
  display: inline-block;
}

span {
  width: 50%;
  float: right;
  margin-top: 30px;
}

.show-on-mobile {
  display:none;

}

@media (max-width: 575px) { 
  .hide-on-mobile {
    display:none;
  }
  .show-on-mobile {
    display:block;
    float:none;
    width:100%;
    margin-bottomn:30px
  }
}