No js needed to sort the elements.
See if this is what you’re looking for
.boxes {
display: flex;
}
.blue {
order: 1;
}
.red {
order: 2;
}<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="boxes">
<div class="red" style="width: 300px; height: 300px; background: red"></div>
<div class="blue" style="width: 300px; height: 300px; background: blue"></div>
</div>
</body>
</html>You can do it by CSS flex property. Just set the boxes element’s flex-direction to row-reverse.
.boxes {
display: flex;
flex-direction: row-reverse;
}<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="boxes">
<div class="red" style="width: 300px; height: 300px; background: red"></div>
<div class="blue" style="width: 300px; height: 300px; background: blue"></div>
</div>
</body>
</html>Note
If you want to display the two boxes vertically aligned then use flex-direction: column-reverse; instead of row-reverse.
Get the parent node (‘.boxes’), then get the childs indexes and swap:
childNode[1].parentNode.insertBefore(childNode[1], childNode[0]);
Little ugly code.
var redtag = document.getElementsByClassName("boxes")[0].getElementsByClassName("red")[0];
redtag.remove();
var bluetag = document.getElementsByClassName("boxes")[0].getElementsByClassName("blue")[0];
bluetag.remove();
document.getElementsByClassName("boxes")[0].appendChild(bluetag);
document.getElementsByClassName("boxes")[0].appendChild(redtag);
Try to change this the way you want to.
document.querySelector(".red").addEventListener("mouseover",()=>{
document.querySelector(".red").style.background="blue"
document.querySelector(".blue").style.background="red"
})<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="boxes">
<div class="red" style="width: 300px; height: 300px; background: red"></div>
<div class="blue" style="width: 300px; height: 300px; background: blue"></div>
</div>
</body>
</html>
<style>
.boxes{display:flex; flex-direction:row;}
</style><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="boxes">
<div class="red" style="width: 300px; height: 300px; color: red"></div>
<div class="blue" style="width: 300px; height: 300px; color: blue"></div>
</div>
</body>
</html>
<style>
.boxes{display:flex; flex-direction:row;}
</style>
is there a way using CSS or javascript to put div.blue in the position of div.red
or div.red in the position of div.blue
Yes there is. But if that’s not the answer you wanted, you’ll have to rewrite your question a bit because DOM manipulation using JS is a pretty basic topic and has
This may help you:
From your example, you don’t need to use javascript — but if you do (for whatever reason) it’s fairly simple.
but this only swaps 2 elements what if I have multiple boxes on my website and I wanted to arrange them anyhow I wanted to, for example, => [div1, div2, div3, div5, div5] can be customized to give => [div4, div1, div3, div2, div5]