在浏览器调整大小时将 div 移动到另一个内部

Question

我目前正在整合一个网站，我在处理移动设备或桌面设备上不在同一位置的元素时遇到了一个小问题。

这是（简化的）代码：

<div class="div-wrapper">

  <div class="my-text-input">Input</div>

    <div class="map">

      <!-- Content -->

    </div>

  </div>

</div>

所以我有 "my-text-input" 元素在之外 "map" 元素在移动设备上（移动设备优先）。当它显示在桌面上时，我希望将其放置在内部 "map" 元素中。

你知道如何做到没有重复内容吗？我考虑过将元素写入两次（内部和外部）并显示一个或另一个，但我想避免这种解决方案。

JS/jQuery 如有需要欢迎解答。

谢谢！

Answer 1

使用以下代码抱歉格式问题我在发布时遇到问题

$(document).ready(function(){
appendDiv();
});
$(window).resize(function(){
 appendDiv();
 });

//在桌面和平板电脑视图中将 div 附加到另一个

function appendDiv() {
if ($(window).width() > 767) {
$('.my-text-input').detach().appendTo('.map');
}}

Answer 2

试试这个代码

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  // tasks to do if it is a Mobile Device
  $('.map').before('<div class="my-text-input">Input</div>');

}else // for desktop
{
  $('.map').append('<div class="my-text-input">Input</div>');
}

在浏览器调整大小时将 div 移动到另一个内部

Move a div inside another on browser resize

html

responsive