Switching the position of two divs

JavaScript
1

Hi all,

I’ve got this technique working perfectly:

Only I want to execute it on screen res 992px and under, should be so easy but I can’t get it to work!!

So in my document I have this:

<script type="text/javascript">

jQuery(document).ready(function() {
	 
	div1 = jQuery('#div1');
	div2 = jQuery('#div2');
	
	tdiv1 = div1.clone();
	tdiv2 = div2.clone();
	
	if(!div2.is(':empty')){
		div1.replaceWith(tdiv2);
		div2.replaceWith(tdiv1);	  
	}
	

});

</script>

This works brilliantly on the reordering (as on the fiddle example), only this needs to only happen on smaller devices. As soon as I add the following if(jQuery) part, it doesn’t work:

<script type="text/javascript">

jQuery(document).ready(function() {

      if(jQuery(window).width() < 992px){
	 
	div1 = jQuery('#div1');
	div2 = jQuery('#div2');
	
	tdiv1 = div1.clone();
	tdiv2 = div2.clone();
	
	if(!div2.is(':empty')){
		div1.replaceWith(tdiv2);
		div2.replaceWith(tdiv1);	  
	}

}
	

});

</script>

Any ideas on where I’m going wrong here? Or if even if this is a good technique to use to achieve this?

Thanks in advance!

Pat

2

It’s going wrong here:

< 992px

It should be:

< 992

Note also that this will only work when the page loads and won’t be triggered if the user simply resizes their browser window.

If you are simply swapping two elements around then you would be better of using flexbox and media queries to accomplish the re-order and avoid js altogether although you will need an extra wrapper to do this.

1 Like
3

If you don’t go with the flexbox solution then there is still no need to clone the elements just to swap their positions - simply insert them where you need them to go and they will be automatically removed from where they were before just as long as you insert the original and not a clone.

4

Ah, yes I did get this working but as you say it only works when page loads.

How would I achieve this with flexbox and media queries? Do you have an example I could take a look at please?

Thanks!

5

Hi,

With flexbox you can do this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap{display:flex;flex-direction:column;}
.content{margin:0 0 25px;width:100%;}
.div1{background:red;}
.div2{
  min-height:150px;
  background:blue;
}

@media screen and (max-width:992px){
	.wrap{flex-direction:column-reverse;}
}
</style>
</head>

<body>

<div class="wrap">
  <div class="content div1">STUFF ONE</div>
  <div class="content div2" >STUFF TWO</div>
</div>

</body>
</html>

If you had more items that needed switching you would use ‘order’ instead of the column-reverse method I used.

If you only have two items then you can use the display:table-footer-group trick to switch one item. This has greater support than flexbox but not so easy to work with as you can’t easily add margins.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap{display:table;width:100%;border-spacing:0 25px}
.content{margin:0 0 25px;display:table-row;}
.div1{background:red;}
.div2{
  height:150px;
  background:blue;
}

@media screen and (max-width:992px){
	.div1{display:table-footer-group}
}
</style>
</head>

<body>

<div class="wrap">
  <div class="content div1">STUFF ONE</div>
  <div class="content div2" >STUFF TWO</div>
</div>

</body>
</html>
1 Like
6

This is amazing!!! I had no idea you could do this purely with CSS, excellent :slight_smile:

Only thing is setting the display to flex on my parent container somehow messes up with positioning of everything within in it on desktop. So I put all of the styles within the 992 media query and that seems to work!

@media only screen and (max-width: 992px) {

		.wrap{
			display:flex;
			flex-direction:column;
		}
	
		.wrap{flex-direction:column-reverse;}

}

Is there any reason I shouldn’t do this?!

Thanks again…

7

As long as you only have the two divs inside the wrap then it should not affect anything else. Only direct children (flex items) of a flex container are affected by the display:flex i.e. any direct children of .wrap become flex items.

You can have anything outside the flex parent (which was called .wrap in my example) and they won’t be affected.

As the only flex behaviour you require is for smaller screens anyway then adding the flex rules into the media query will be fine.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.