There are many awesome things you can do in Chrome DevTools that you easily miss out on some of the practical features. Recently I discovered that you can rearrange elements live, in your browser, on any website, to see how things could look if they were arranged differently.
Let’s say you’re thinking about rearranging some content on your front page, but you’re not quite sure if what you have in mind will work, so you want to visualize it before you even touch your text editor.
To test it out, simply open your DevTools Elements panel, and locate the specific sections or elements on your page that you want to rearrange.
Now, and this part is important, hold down your mouse (hold down left-click) on the element you want to rearrange, and now drag it to the position in your HTML where you want to drop (reposition) it, and then let go of your mouse.
Demo
It can be a little tricky to get a hang of at first, because only sometimes you’ll get a little underline to indicate where you’re dropping your element, but whether or not you get the indicator, it works pretty smoothly.
