Is There a Way in CSS to Move an Element in The Dom

Is there a way in CSS to move an element in the DOM

Not using CSS, no. You can manipulate the DOM using JavaScript, but not with CSS. You could 'visually' move it with CSS, but that wouldn't affect the DOM structure, just how it is presented.

How to move an element into another element

You may want to use the appendTo function (which adds to the end of the element):

$("#source").appendTo("#destination");

Alternatively you could use the prependTo function (which adds to the beginning of the element):

$("#source").prependTo("#destination");

---

Example:

$("#appendTo").click(function() {  $("#moveMeIntoMain").appendTo($("#main"));});$("#prependTo").click(function() {  $("#moveMeIntoMain").prependTo($("#main"));});

#main {  border: 2px solid blue;  min-height: 100px;}
.moveMeIntoMain {  border: 1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="main">main</div><div id="moveMeIntoMain" class="moveMeIntoMain">move me to main</div>
<button id="appendTo">appendTo main</button><button id="prependTo">prependTo main</button>

CSS move one div to another div

Is it possible to move secondDivInside to firstDiv by using only css ?

No...I don't believe there is a way (esoteric or not) to manipulate/shift the actual structure of the DOM with CSS.

The lowest-level, albeit non-elegant, would be to duplicate the div and show/hide it with display:none/block.

However, this seems like a basic structure issue. Why are your elements in ordered in such a way that mobile-reordering must be completely overhauled?

Here is an article that discusses pros/cons of mobile structuring as you design your pages...it's a quick read that may help you better conceptualize how to design for mobile<->desktop.
https://codemyviews.com/blog/mobilefirst

Move DOM elements off screen without increasing body width

If you use transform: translateX(-100%); (where -100% is whatever you have to do to move it off screen), it shouldn't affect body width.

Also, using position: absolute; left: -100%; (again, -100% is whatever you have to do to move the element off screen), the body width shouldn't be affected, either.

Move an element one place up or down in the dom tree with javascript

With jQuery:

var e = $("#div_2");
// move up:
e.prev().insertAfter(e);
// move down:
e.next().insertBefore(e);

JavaScript moving element in the DOM

Trivial with jQuery

$('#div1').insertAfter('#div3');
$('#div3').insertBefore('#div2');

If you want to do it repeatedly, you'll need to use different selectors since the divs will retain their ids as they are moved around.

$(function() {
    setInterval( function() {
        $('div:first').insertAfter($('div').eq(2));
        $('div').eq(1).insertBefore('div:first');
    }, 3000 );
});

Why does moving an element within the DOM stop CSS transitions from happening?

For a transition to work, the element has to go from one state to an other one.

Browsers will generally wait until they have to actually paint your page before recalculating all the new styles you may have applied through js.

In your complex code, the different states are set synchronously, and thus, the transition won't occur.

That's why waiting some time might work, or might not: when this recalculation should happen is not specified, and you can't be sure when a specific browser will do it.

• requestAnimationFrame should trigger before the next screen refresh, so if the browser implementation decided to trigger the recalculation just before the repaint, it can be after this rAF callback.
  
  To wait next frame, you have to nest your rAF calls (requestAnimationFrame(()=>requestAnimationFrame(callback))).
• setTimeout(fn, 10) is just complete randomness to this regard, because a frame lasts at most 16.6ms.
• setTimeout(fn, 100) will work because it's more than a frame later.

To overcome this, in all browsers, and synchronously, you can tell the browser to recalculate the current styles applied on your elements by triggering a reflow, before you set the final state, in positionInfo(), before resolving the Promise:

console.clear()window.addEventListener('load', () => {  const infoBlock = document.getElementById('info')  const links = document.getElementsByTagName('a')
  for (let link of links) {    link.addEventListener('click', e => {      e.preventDefault()      infoBlock.target = e.target      toggleInfo(infoBlock, 'hide')        .then(infoBlock => positionInfo(infoBlock))        .then(infoBlock => toggleInfo(infoBlock, 'show'))    })  }})
function toggleInfo(infoBlock, action) {  return new Promise((resolve, reject) => {    const isVisible = () => !infoBlock.classList.contains('hidden')
    const transitionHandler = e => {      if (e.propertyName !== 'max-height') return      infoBlock.removeEventListener('transitionend', transitionHandler)      resolve(infoBlock)    }
    const correctState = (action === 'hide') ? !isVisible() : isVisible()    if (!correctState) {      infoBlock.classList.toggle('hidden')      infoBlock.addEventListener('transitionend', transitionHandler)    } else {      resolve(infoBlock)    }  })}
function positionInfo(infoBlock) {  return new Promise((resolve, reject) => {    let target = infoBlock.target
    let row = target.parentNode    while (!row.classList.contains('row')) row = row.parentNode
    let nextRow = row.nextSibling
    if (nextRow !== null) {      nextRow.parentNode.insertBefore(infoBlock, nextRow)    } else {      row.parentNode.appendChild(infoBlock)    }    // trigger a reflow    row.offsetWidth;    resolve(infoBlock)  })}

.row a {  margin: 10px 0;}
.info {  background: #111;  color: white;  text-align: center;  height: 240px;  max-height: 240px;  transition: max-height 1s;}
.info.hidden {  max-height: 0;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />
<div id="info" class="row info hidden">  <p class="col-12">info</p></div><div class="container">  <div class="row" id="row01">    <a href="#" class="col-4"><img src="https://via.placeholder.com/150x100" alt="placeholder"></a>    <a href="#" class="col-4"><img src="https://via.placeholder.com/150x100" alt="placeholder"></a>    <a href="#" class="col-4"><img src="https://via.placeholder.com/150x100" alt="placeholder"></a>  </div>  <div class="row" id="row02">    <a href="#" class="col-4"><img src="https://via.placeholder.com/150x100" alt="placeholder"></a>    <a href="#" class="col-4"><img src="https://via.placeholder.com/150x100" alt="placeholder"></a>    <a href="#" class="col-4"><img src="https://via.placeholder.com/150x100" alt="placeholder"></a>  </div>  <div class="row" id="row03">    <a href="#" class="col-4"><img src="https://via.placeholder.com/150x100" alt="placeholder"></a>    <a href="#" class="col-4"><img src="https://via.placeholder.com/150x100" alt="placeholder"></a>    <a href="#" class="col-4"><img src="https://via.placeholder.com/150x100" alt="placeholder"></a>  </div>  <div class="row" id="row04">    <a href="#" class="col-4"><img src="https://via.placeholder.com/150x100" alt="placeholder"></a>    <a href="#" class="col-4"><img src="https://via.placeholder.com/150x100" alt="placeholder"></a>    <a href="#" class="col-4"><img src="https://via.placeholder.com/150x100" alt="placeholder"></a>  </div>  <div class="row" id="row05">    <a href="#" class="col-4"><img src="https://via.placeholder.com/150x100" alt="placeholder"></a>    <a href="#" class="col-4"><img src="https://via.placeholder.com/150x100" alt="placeholder"></a>    <a href="#" class="col-4"><img src="https://via.placeholder.com/150x100" alt="placeholder"></a>  </div></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>

---

Related Topics