Can I move an element to another element with CSS? - html

Question

Can we swap items from different div using CSS?
I need to move item duaA to satuA and otherwise. Is it possible?
I have something like this:
<div id="satu">
<div class="satuA"></div>
<div class="satuB"></div>
</div>
<div id="dua">
<div class="duaA"></div>
<div class="duaB"></div>
</div>

Answer 1

.parent {
display: flex;
direction: rtl;
align-items: right;
justify-content: flex-end;
}
<div class="parent">
<div id="satu">
<div class="satuA">satuA</div>
<div class="satuB">satuB</div>
</div>
<div id="dua">
<div class="duaA">duaA</div>
<div class="duaB">duaA</div>
</div>
</div>
Do you need like that way. I have used Direction css.

Answer 2

I don't think it is possible to use CSS to swap physical content (if you mean that), but it is in JavaScript.
function swap() {
const satu = document.getElementById("satu").innerHTML
const dua = document.getElementById("dua").innerHTML
document.getElementById("satu").innerHTML = dua
document.getElementById("dua").innerHTML = satu
}
swap()
console.log(document.getElementById("content").innerHTML)
<div id="content">
<div id="satu">
<div class="satuA"></div>
<div class="satuB"></div>
</div>
<div id="dua">
<div class="duaA"></div>
<div class="duaB"></div>
</div>
</div>

Answer 3

Following my first comment, Here is a grid possibility from a common container for both parents:
Follow my second comment : Is it 2 or 4 of them to swap and then, to which position exactly? Is it a simple row, a simple column or a columns and rows layout? , if snippet below do not answer your question.
grid demos:
#satudua {
display: grid;
}
div div {
margin: 4px;
border: solid 2px;
}
#satu,
#dua {
grid-row: 1;
grid-column: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr)
}
.satuA {
grid-row: 2;
grid-column: 1;
color: green
}
.duaA {
grid-row: 1;
grid-column: 1;
color: tomato
}
.satuB {
grid-row: 1;
grid-column: 2;
}
.duaB {
grid-row: 2;
grid-column: 2;
}
div div div:first-of-type:before {
content: ' Swapped ';
color: black;
}
<div id="satudua">
<div id="satu">
<div class="satuA">satuA</div>
<div class="satuB">satuB</div>
</div>
<div id="dua">
<div class="duaA">duaA</div>
<div class="duaB">duaB</div>
</div>
</div>
or was it side by side ?
#satudua {
display: grid;
}
div div {
margin: 4px;
border: solid 2px;
}
#satu,
#dua {
grid-row: 1;
grid-column: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr)
}
#satu>div {
grid-column: 1;
grid-row: 2;
}
#dua>div {
grid-column: 2;
grid-row: 2;
}
#satu>.satuA {
grid-row: 1;
grid-column: 2;
color: green
}
#dua>.duaA {
grid-row: 1;
grid-column: 1;
color: tomato
}
div div div:first-of-type:before {
content: ' Swapped ';
color: black;
}
<div id="satudua">
<div id="satu">
<div class="satuA">satuA</div>
<div class="satuB">satuB</div>
</div>
<div id="dua">
<div class="duaA">duaA</div>
<div class="duaB">duaB</div>
</div>
</div>