Swap Div Position With CSS Only

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.

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;
}

Possible to swap position of div elements using CSS?

Here you go. Just use a table. You must work on three elements, a container and the two containing elements.

#container {    display:table;    width: 100%;}#first{     display:table-footer-group; }
#second{     display:table-header-group; }

<div id ="container">    <div id = "first">This is the first div</div>    <div id = "second">This is the second div</div></div>

how to swap div with one another in mobile view css

You have some options depends on what browser do your client want to use:

For older browsers, according to this answer you can use table layout to reorder your divs:

#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { display: table-header-group; }

For newer browsers you can use FlexBox to specify order

#wrapper   { display: flex; }
#firstDiv  { order: 1; }
#secondDiv { order: 2; }

How to swap element position using Css?

Instead of flex-direction: column-reverse, use flex-direction: row-reverse.

Swap div position with media query

You only need to reset the float or width properties.

Do mind the BFC block formating context when you deal with floating and non floatting elements.

http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/

* {  padding: 0;  margin: 0;}#a {  float: left;  background-color: red;  width: 150px;}#b {  background-color: blue;}#c {  float: right;  width: 40%;  background-color: yellow;}@media (max-width: 600px) {  #c {        width: 100%;  }}

<div>  <div id="a">a float</div>  <div id="c">c float or not</div>  <div id="b">b</div></div>

Swap container elements order using CSS only

Explanation

As other's have mentioned already, you could try leveraging the CSS property order inside a container with display: flex. By default elements are rendered in the order they appear in the document but you can change the ordering through that property.

Demonstration

.column {
  display: flex;
  flex-direction: column;
}

.column > div {
  display: block;
  border: 1px solid red;
  margin: 0 auto 20px;
  text-align: center;
  width: 300px;
}

.column > div:nth-child(2) {
  order: -1;
}

.column > div:nth-child(5) {
  order: 1;
}

<div class="column">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

How can i make div 1 appear below in div 2 using css

You can use flex order. You'll have to add a container or use the current containing element and give it a display: flex property.

.cont{  display: flex;  flex-direction: column;}
.c1{  order: 2;}
.c2{  order: 1;}

<div class="cont">  <div class="c1">    <p> THIS IS DIV 1> </p>  </div>  <div class="c2">    <p> THIS IS DIV 2> </p>  </div></div>

Swap Div Position With CSS Only