在不同屏幕尺寸下改变div顺序

Question

<div class="first"></div>
<div class="second"></div>

我尝试使用CSS将它们从float:left和float:right更改，并在@media(max-width:820px)查询下反转它，我确信这在过去是有效的，但现在不起作用。

尝试了一个简单的JQuery：

if ($(window).width() < 820) {
   $( ".first" ).insertAfter( $( ".second" ) );
}
else {
   $( ".first" ).insertBefore( $( ".second" ) );
}

我知道这应该很简单，但它就是无法正常运行，我做错了什么吗？

- Chobbit

Answer 1

你尝试过使用弹性盒子排序吗？

.container {
  display: flex;
}

.container > div {
  display: block;
  padding: 1em 0;
  flex: 1;
  background-color: red;
}

@media (max-width: 800px) {
  .first {
    order: 2;
  }
}

<div class="container">
  <div class="first">first</div>
  <div class="second">second</div>  
</div>

https://jsfiddle.net/xgkpfgc5/1/

- Andy Hoffman

---

我正想建议您这样做。不要使用jQuery @chobbit，而是尽量学习更多的CSS，这将极大地加速您的开发过程和网站的实际加载速度！ - Carele

虽然我能看到这个代码对某些情况有效，但是在我的代码中却无法生效，但应该对许多其他人有效，所以谢谢 :) 我尝试了所有提供的代码，并且真的希望这个CSS能够生效，因为如果可以的话，我更喜欢使用CSS而不是脚本。幸运的是，blonfu的CSS代码（使用table-row-group和table-row header）与我的代码兼容，所以我仍然避免了使用脚本 :) - Chobbit

Answer 2

我认为更好的解决方案是使用flexbox或者如果你使用Bootstrap，则使用pull和push类，但还有另一种有趣的解决方案：

.first,
.second {
  background: #ccc;
  text-align: center;
  margin: 5px 0;
}
@media(max-width:820px) {
  .container {
    display: table;
    border-spacing: 0 5px;
    width: 100%;
  }
  .first {
    display: table-row-group;
  }
  .second {
    display: table-header-group;
  }
}

<div class="container">
  <div class="first">1</div>
  <div class="second">2</div>
</div>

- user4994625

---

这段代码对我来说完美地运行了，正如我所希望的那样，不需要使用脚本，只需使用CSS即可。我可以看到Andy Hoffman的代码也应该可以工作，但由于某些原因与我的代码不兼容，所以我必须将其声明为最佳答案。谢谢 :) - Chobbit

Answer 3

请看下面的代码：

https://jsfiddle.net/jwgbcdc7/2/

$(window).on("resize", function() {
  $(".currentwidth").text($(window).width());
  if ($(window).width() < 820) {
    $(".first").insertAfter($(".second"));
  } else {
    $(".first").insertBefore($(".second"));
  }

})

我们已将 resize 事件附加到 window 上，以捕获更新的屏幕宽度。

- vijayP

---

这个作为我的原始jQuery的插件非常好用，谢谢。不幸的是，我必须放弃使用脚本来实现CSS的效果，所以你错过了机会。但是，感谢你，这对人们很有帮助 :) - Chobbit

Answer 4

尝试这个，我不知道但是希望它能够工作 :)

function checkPosition() {
    if (window.matchMedia('(max-width: 820px)').matches) {
        //...
    } else {
        //...
    }
}

- Roshan Trivedi

Answer 5

试试这个。

<div class="container">
        <div id="column1" class="row col-xs-6 col-sm-8">
            <div id="B" class="col-xs-12 col-sm-6">B</div>
            <div id="logo" class="col-xs-12 col-sm-6">Logo<br/>Logo</div>
        </div>
        <div id="column2" class="row col-xs-6 col-sm-4">
            <div id="A" class="col-xs-12 col-sm-12 ">A</div>
        </div>
    </div>
    and the JS

    $(function() {
        $(window).resize(function() {
            var w = $(window).width();
            if (w < 768 && $('#column1').children().length > 1) {
                $('#B').prependTo( $('#column2') );
            } else if (w > 768 && $('#column2').children().length > 1) {
                $('#B').prependTo( $('#column1') );
            }
        });
    });

- arun

---

如果使用Bootstrap，您可以使用pull/push类来实现此操作。 - Faisal Ashfaq

这是因为当有足够的空间时，它们首先会浮动到它们的原始位置。然而，当大小调整为中等并且空间丢失时，它们就会堆叠在一起，因为它们无法相互浮动。请注意，即使我对两个都使用了6列，但即使它们不是6列，这也适用。 - arun

Answer 6

你甚至可以尝试添加jQuery方法resize()，如下所示。

$(window).resize(function(){
var wd = $(window).width();
if ( wd < 820) {
   $( ".first" ).after( $( ".second" ) );
}
else {
   $( ".first" ).before( $( ".second" ) );
}
});

- frnt

Answer 7

<div class="row row-fluid">
   <div class="col-md-6 col-md-push-6">
       <img src="some-image.png">
   </div>

   <div class="col-md-6 col-md-pull-6">
       <h1>Headline</h1>
       <p>Lorem ipsum text of doom</p>
   </div>
</div>

- arun