Jquery 如何在引导中垂直对齐的同一列上拉动和推动两个div

当两列在右侧和左侧时，我可以拉和推两列，但当两列垂直对齐时，我无法对列进行排序

我想做的是，在大屏幕上，我希望列1（产品详细信息文本）首先出现，在小屏幕上，我希望列2（缩略图部分）出现在列1之前，以便在小屏幕上，它出现在滑块的大图像之后

   <div class="container">
  <div class="content">
  <div class="row">
    <div class="col-sm-6">

        <div id="carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://placehold.it/350x250/e8117f/fff&text=Product+Main">
                </div>
                <div class="item">
                    <img src="http://placehold.it/350x250/00ffff/000&text=Product+Image+2">
                </div>
                <div class="item">
                    <img src="http://placehold.it/350x250/ff00ff/fff&text=Product+Image+3">
                </div>
                <div class="item">
                    <img src="http://placehold.it/350x250/ffff00/000&text=Product+Image+4">
                </div>
            </div>

        </div> 
    </div> <!-- /col-sm-6 -->
    <div class="col-sm-6">
      <h1>Products</h1>  
        <h3>Some product subhead</h3>
        <p>Product description goes here.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
        <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>


    </div> <!-- /col-sm-6 -->
    <div class="clearfix col-sm-6">
              <div class="carousel-link">
                <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://placehold.it/100/e8117f/fff&text=Product+Main"></div>
                <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://placehold.it/100/00ffff/000&text=Product+Image+2"></div>
                <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://placehold.it/100/ff00ff/fff&text=Product+Image+3"></div>
                <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://placehold.it/100/ffff00/000&text=Product+Image+4"></div>
              </div>
            </div>
  </div> <!-- /row -->
  </div>
</div> <!-- /container -->

您可以将旋转木马及其链接（缩略图）组合在一起

css

产品
某些产品分目
产品说明在这里。Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子

Donec pede justo、fringilla vel、aliquet nec、vulputate eget、arcu。在埃尼姆·胡斯托、朗卡斯·乌特、伊佩拉、维尼那提斯·维塔、胡斯托。猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯

感谢您的尝试。但这不是我要找的，因为我希望缩略图显示在大屏幕上的详细信息文本之后，并且希望缩略图显示在小屏幕上的详细信息文本之前。谢谢

.carousel-link .thumb {
    width: 25%;
    cursor: pointer;
    float: left;
}
.carousel-link .thumb img {
    width: 100%;
    padding: 2px;
}
.carousel-link .thumb:first-of-type img {
    padding-left: 0;
}
.carousel-link .thumb:last-of-type img {
    padding-right: 0;
}
.item img {
    width: 100%;    
}

<div class="container">
    <div class="content">
        <div class="row">
            <div class="col-sm-6">
                <div class="row">
                    <div class="col-sm-12">
                        <div id="carousel" class="carousel slide" data-ride="carousel">
                            <div class="carousel-inner">
                                <div class="item active">
                                    <img src="http://placehold.it/350x250/e8117f/fff&text=Product+Main">
                                </div>
                                <div class="item">
                                    <img src="http://placehold.it/350x250/00ffff/000&text=Product+Image+2">
                                </div>
                                <div class="item">
                                    <img src="http://placehold.it/350x250/ff00ff/fff&text=Product+Image+3">
                                </div>
                                <div class="item">
                                    <img src="http://placehold.it/350x250/ffff00/000&text=Product+Image+4">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="carousel-link">
                            <div data-target="#carousel" data-slide-to="0" class="thumb">
                                <img src="http://placehold.it/100/e8117f/fff&text=Product+Main">
                            </div>
                            <div data-target="#carousel" data-slide-to="1" class="thumb">
                                <img src="http://placehold.it/100/00ffff/000&text=Product+Image+2">
                            </div>
                            <div data-target="#carousel" data-slide-to="2" class="thumb">
                                <img src="http://placehold.it/100/ff00ff/fff&text=Product+Image+3">
                            </div>
                            <div data-target="#carousel" data-slide-to="3" class="thumb">
                                <img src="http://placehold.it/100/ffff00/000&text=Product+Image+4">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /col-sm-6 -->
            <div class="col-sm-6">
                 <h1>Products</h1> 
                 <h3>Some product subhead</h3>

                <p>Product description goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
            </div>
            <!-- /col-sm-6 -->
        </div>
        <!-- /row -->
    </div>
</div>
<!-- /container -->