在移动设备上将课程移至另一课程

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已经提到的，我建议你使用响应式CSS框架，如Bootstrap或Bulma。

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

CodePen：https://codepen.io/dmnktoe/pen/GzwQaR