Question

我具有以下结构：

<div class="container">
   <div class="text1">...</div>
</div>

<div class="aside">
   <div class="text2">...</div>
</div>

当用户使用移动设备获取此结构时，是否可能：

<div class="container">
   <div class="text2">...</div> (should be on top place)
   <div class="text1">...</div>
</div>

<div class="aside"> (this class can be hidden)

</div>

我不喜欢带有display的选项：none / block。有没有办法用JavaScript做到这一点？

谢谢！

Answer 1

这在jQuery中是一种简单的方法，但是正如@messerbill已经提到的那样，我建议您使用诸如Bootstrap或Bulma之类的自适应CSS框架。

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  $(".text2").prependTo(".container");
}

代码笔：https://codepen.io/dmnktoe/pen/GzwQaR

在手机上将班级移至另一个班级

1 个答案: