Question

我需要在移动视图中使用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>

我想在移动视图中的标题后移动范围。

这就是我想要的移动设备：

＆＃13;

.container {
  display: inline-block;
  width: 100%;
}

aside {
  width: 50%;
  display: inline-block;
}

span {
  width: 50%;
  float: right;
  margin-top: 30px;
}

＆＃13;

<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>

＆＃13;

Answer 1

你可以这样做。

<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>

对于移动视图，请使用媒体查询

@media screen and (max-width: 600px) {
   #spn1{
 display:block;
}
 #spn2{
 display:none;
}
}

Answer 2

通过使用媒体查询切换类来尝试此操作

@media screen and (max-width: 600px) {
  .show-mob {
    display: block;
  }
  .show {
    display: none;
  }
}

<div class="container">
  <aside>
    <h2>Heading</h2>
    <span class="show-mob">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="show">This line should come after heading.</span>
</div>

Answer 3

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

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

如果您没有机会使用jQuery，则需要重新构建HTML

Answer 4

你可以这样做：

<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>

和CSS：

.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
  }
}

EXAMPLE

Answer 5

@media only screen and (max-width: 768px) {
.container {
  display: inline-block;
  width: 100%;
}

aside {
  width: 100%;
  display: inline-block;
}
.container h2{position:relative; margin-bottom:20px;}
.container p{padding-top:30px;}
span {
  width: 100%;
  position:absolute;
  left:0;
  top:60px;
  padding:10px;
}
}

<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更改移动视图中元素的顺序

5 个答案: