CSS move one div to another div

Issue

I have code (desktop):

<div class="firstDiv">
     <div class="firstDivInside">...</div>
</div>
<div class="secondDiv">
   <div class="secondDivInside">...</div>
</div>

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

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

}

I need (on phones):

<div class="firstDiv">
     <div class="firstDivInside">...</div>
     <div class="secondDivInside">...</div>
</div>
<div class="secondDiv">
</div>

Solution

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

Answered By - rob