Swap HTML divs [closed]

Navigation
-1

As the image shows. I have div mother containing 5 div vertically aligned.

How do I change the position of the last div contact by positioning it between home and services without having to change the default HTML (simply using CSS or JS).

I tried to use position: relative and position: absolute and move div to top ownership. The problem is that by moving the element it overlaps the other (above).

What would be the solution to this case?

    
asked by anonymous 02.02.2017 / 01:37

1 answer

1

As the question quoted as duplicate does not allow a solution with JavaScript, I'll put a simple one here using jQuery.

Given the HTML structure below: 

<div id="menu">
  <div>Home</div>
  <div>Services</div>
  <div>Products</div>
  <div>Our puppies</div>
  <div>Contact</div>
</div>

We can use the following code with jQuery to reposition the last div , placing it in the second position. 

$(function () {
  var contact = $("#menu div:last-child");
  var home = $("#menu div:first-child");

  home.after(contact);
});

See this example working here .

    
02.02.2017 / 02:17
How to transform a div and an input text? Generic interface