How to Switch Two Divs in HTML

Swap DIV position with CSS only

Someone linked me this: What is the best way to move an element that's on the top to the bottom in Responsive design.

The solution in that worked perfectly. Though it doesn’t support old IE, that doesn’t matter for me, since I’m using responsive design for mobile. And it works for most mobile browsers.

Basically, I had this:

@media (max-width: 30em) {
  .container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  .container .first_div {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }

  .container .second_div {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
}

This worked better than floats for me, because I needed them stacked on top of each other and I had about five different divs that I had to swap around the position of.

How to switch two divs in html

You Can use Z-index to solve this problem

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
</style>
</head>
<body>

<h1>The z-index Property</h1>

<img src="w3css.gif" width="100" height="140">

<p>Because the image has a z-index of -1, it will be placed behind the heading.</p>

</body>
</html>

Swap Position of two DIV using ID

You need to copy the element, insert it after, then delete the first one. Or you would end up with duplicates. You could use jquerys detach method. It removes the object but it keeps the data. Use it like this:

for (var i = 0; i < data.stops.length; i++) {
    if (value == "A" || value == "B") {
        $('#multi_stops').detach().insertBefore($('#before_stops'));
        $('.multi').append('<li><span><img src="' + base_url + 'assets/images/multi_stops.png" width="18px" height="18px"></span><div class="verticalLine"></div>' + data.stops[i].stopDestination + "<br/><br></li>");
    } else {
        $('#multi_stops').detach().insertAfter($('#before_stops'));
        $('.multi').append('<li><span><img src="' + base_url + 'assets/images/multi_stops.png" width="18px" height="18px"></span><div class="verticalLine"></div>' + data.stops[i].stopDestination + "<br/><br></li>");
    }
}

Switch two div in responsive design

In which phones / browsers didn't it work?

What if you add some vendor specific properties? Seems to work here:

http://jsfiddle.net/ivanchaer/8vy8khnq/2/

HTML

Resize this window until the divs switch places.
<div class="wrapper">
    <div id="first_div" class="col">first div</div>
    <div id="second_div" class="col">second div</div>
</div>
<a>Link</a>

CSS

.wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.col {
    width: 100px;
    float: left;
    border: 1px solid black;
    padding: 5px;
    /*flex-grow: 1;*/
}
#first_div {
    background: yellow;
    height: 200px;
}
#second_div {
    background: cyan;
    height: 100px;
}
@media (max-width: 400px) {
    .wrapper {
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -moz-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
}

Bootstrap, getting two elements to swap sides

I don't know if there is a solution native to bootstrap but you could definitely use the flex-direction: row-reverse; property for this.

Have a look at the snippet below:

.row-reverse {  flex-direction: row-reverse;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row row-reverse">  <div class="one col-6">    <p>One</p>  </div>
  <div class="two col-6">      <p>Two</p>  </div></div>

Switching between two div elements using Javascript

Add condition to check if the div is visible then hide it and show the other one if else do the reverse :

function myFunction() {
   var mainFrameOne = document.getElementById("mainFrameOne"); 
   var mainFrameTwo = document.getElementById("mainFrameTwo");

   mainFrameOne.style.display = (
       mainFrameOne.style.display == "none" ? "block" : "none"); 
   mainFrameTwo.style.display = (
       mainFrameTwo.style.display == "none" ? "block" : "none"); 
}

Hope this helps.

function myFunction() {   var mainFrameOne = document.getElementById("mainFrameOne");    var mainFrameTwo = document.getElementById("mainFrameTwo");
   mainFrameOne.style.display = (       mainFrameOne.style.display == "none" ? "block" : "none");    mainFrameTwo.style.display = (       mainFrameTwo.style.display == "none" ? "block" : "none"); }

<div id="mainFrameOne">    <p>mainFrameOne</p></div><div id="mainFrameTwo" style="display:none;">    <p>mainFrameTwo</p></div><button onclick="myFunction()">Click me</button>

Swap div order using css only

According to this and many others, i am afraid you can not swap only with css, but I've found something that will help you in this situation and that is this

So this will be your edit on fiddle

#container {
 display: table; width: 200px; 
 border:1px red solid;
}
#left-sidebar {
 display: table-header-group;
}
#right-sidebar {
 display: table-footer-group;
}