如何在 window 调整大小时重新排列多个 div - jQuery 或 CSS

Question

我想征求一些建议或想法如何在 window 调整大小时（例如在移动设备上）更改多个 div 的位置。

问题是我无法为桌面用户创建 div，为移动用户复制相同的 div，然后根据window 大小，因为 div 必须具有唯一性 id。

所以我需要用 CSS 或 jQuery 来完成。任何想法将不胜感激。这就是我需要的：

这是一个JSFiddle

谢谢！

Answer 1

将 flexbox 与 'order' 属性和媒体查询一起使用。

或者这可以使用 'float' 属性和媒体查询来实现，具体取决于您的用例。

Answer 2

您可以为此使用媒体查询

@media (max-width:768px){
 .b, .a {
    display: block;
    float: none;
    height: auto;
 }
}

JS

 var flag =true;
 $( window ).resize(function() {

 if($(this).width() <= 768){

 if(flag){

   var b1 = $('.b1').clone();
   var a2= $('.a2').clone();
   $('.a').find('.a2').remove();
   $('.b').find('.b1').remove();
   $('.a').append(b1);
   $('.b').prepend(a2)
   flag= false;
  }

 }else{
 if(!flag){

  var b1 = $('.b1').clone();
  var a2= $('.a2').clone();
  $('.a').find('.b1').remove();
  $('.b').find('.a2').remove();
  $('.a').append(a2);
  $('.b').prepend(b1)
  flag= true;
 }

 }
});

我更新了你的fiddlehttps://jsfiddle.net/36fh7hn3/5/

如何在 window 调整大小时重新排列多个 div - jQuery 或 CSS

How to rearrange several divs on window resize - jQuery or CSS

javascript

css

jquery

window-resize

media-queries