时间戳

首页 > 解决方案 > 在移动设备上将班级转移到另一个班级

javascript - 在移动设备上将班级转移到另一个班级

问题描述

我有以下结构：

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

我不喜欢显示选项：none/block。有没有办法用javascript做到这一点？

谢谢！

标签： javascripthtmlresponsivemove

解决方案

这将是 jQuery 中的一种简单方法，但正如 @messerbill 已经提到的，我建议您使用响应式 CSS 框架，例如 Bootstrap 或 Bulma。

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

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

推荐阅读