jquery - 用于小屏幕的 Bootstrap 交换 div

Question

我有一个在父 div 中具有绝对位置的子 div。

父 div 包含具有相对位置的 Bootstrap 轮播。

这是我的代码

 <div class="carousel>
    Carousel goes here
    <div class="col-md-6 SearchBoxHome">
       content goes here
    <div>
  </div>

我想在小屏幕上将子 div 显示在父 div 的下方。

这是我试过但没有用的 jquery 代码。

var screenWidth = $(window).width();
if (screenWidth <= 767) {
   $('.carousel').before($('.SearchBoxHome'));
} else {
  return false;
}

请帮助我

Answer 1

试试这个:

var screenWidth = $(window).width();
if (screenWidth <= 767) {
    var content = $('.SearchBoxHome');
    $('.carousel').before(content);
    $('.carousel').find('.SearchBoxHome').remove();
}