# Moving a div to a different parent, which also moves, using matchMedia

I'm very new to JavaScript so I thought I'd ask for someone to have a quick look over this to make sure it isn't brittle, buggy, or completely unnecessary. It may be all three. I also thought it might help someone in the future (if correct), as I found lots of different suggestions I don't think I needed including looping through all the child nodes and using enquire.js.

It moves a div from one parent container to another depending on whether a media query is relevant. The target div also moves with a normal css media query.

codepen (make the container height a fair bit taller than the width)

<div class="wrapper">
<div class="container container1" id="c1">
<div class="item item1">1</div>
<div class="item item2" id="toMove">2</div>
<div class="item item3" id="item3">3</div>
</div>

<div class="container container2" id="c2">
<div class="item item4">4</div>
<!-- Item3 will end up here -->
</div>
</div>


css

.wrapper{
display:flex;
flex-direction: column;
width: 100%;
background: #eaeaea;
}

@media (min-aspect-ratio: 4/5){
.wrapper{
flex-direction: row;
}
}

.container{
display: flex;
justify-content: space-around;
}

.container1{
flex-basis: 66.6%;
background: red;
}

.container2{
flex-basis: 33.3%;
background: blue;
}

.item{
background: white;
margin: 20px;
border: 1px solid #333;
}


js

var container1 = document.getElementById('c1');
var container2 = document.getElementById('c2');
var item = document.getElementById('toMove');

if(mql.matches) {
moveElement(item, container1);
}
else {
moveElement(item, container2);
}
});

function moveElement(source, target){
target.appendChild(source);
}


Appreciate the feedback as I don't really know what I'm doing with JS!

*fixed the problem in the example RE moving the item back to its original location. I just call the method container1.insertBefore(toMove, item3); in the 'else' block, instead of calling moveElement(). (where item3 is a variable pointing to #item3)

In case that helps anyone.