Question

我想问一下当我们最小化屏幕时是否有办法改变网格位置

示例：

<div class="row">
  <div class="col-lg-6 -col-sm-12 col-xs-12">
    <img src="http://placehold.it/350x150">//first image
  </div>
  <div class="col-lg-6 -col-sm-12 col-xs-12">
    <img src="http://placehold.it/350x150">//second image
  </div>
</div>

正常情况下，如果我们将屏幕最小化，直到sm或xs-screen它会喜欢这个

--------
|first |
|      |
|second|
--------

如何制作这样的

--------
|second|
|      |
|first |
--------

我不知道是否可以用jquery完成，我对jquery一无所知。请帮帮我们

Answer 1

你可以使用jquery resize事件。

<div class="row">
   <div class="col-md-6 col-md-push-6 col-xs-12">
      <img src="http://placehold.it/350x150" id="img1">//second image
   </div>
   <div class="col-md-6 col-md-pull-6 col-xs-12">
      <img src="http://placehold.it/350x150" id="img2">//first image
   </div>
</div>

JS：

   $(window).bind('resize', function () {
            var img1Src = $('#img1').attr('src');
            $('#img1').attr('src', $('#img2').attr('src'));
            $('#img2').attr('src', img1Src);
        });

Answer 2

Bootstrap是'先移动'，然后您必须首先考虑移动版本，然后考虑其他版本。

<div class="row">
   <div class="col-md-6 col-md-push-6 col-xs-12">
      <img src="http://placehold.it/350x150">//second image
   </div>
   <div class="col-md-6 col-md-pull-6 col-xs-12">
      <img src="http://placehold.it/350x150">//first image
   </div>
</div>

最小化时改变位置网格

2 个答案: