用于小屏幕的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();
}