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

Question

I would like to ask for some advice or idea how to change the position of several div s when the window is resized (for example on a mobile device).

The problem is that I cannot create one div for a desktop user, copy the same div for a mobile user and then do display:none for one of those depending on the window size because the div s have to have unique id .

So I need to do it either with CSS or jQuery. Any ideas will be appreciated. This is what I need:

Here is a JSFiddle

Thank you!

Answer 1

you can use media queries for that

@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;
 }

 }
});

I updated your fiddle https://jsfiddle.net/36fh7hn3/5/

Answer 2

Use flexbox with the 'order' property and media queries.

Or this could possibly be achieved using the 'float' property and media queries depending upon your use case.