How to Use CSS to Reverse The Display Order of Two Elements

Can I use CSS to reverse the display order of two elements?

Yes, with flex boxes - http://jsfiddle.net/F8XMk/

#container{
  display: flex;    
  flex-flow: column;
}

#child1{
  order: 2;
}

#child2{
  order: 1;    
}

Newer browser support for flex is pretty good. You could also hack your way through it with negative margins :)

reverse the order of div's children

The modern answer is

#parent {
  display: flex;
  flex-direction: column-reverse;
}

Reverse order in HTML div element

Setting the a tag as such:

a {
display: flex;
flex-direction: column-reverse;
}

will work. Further explanation is here: https://css-tricks.com/almanac/properties/f/flex-direction/

The flex-direction property is a sub-property of the Flexible Box
Layout module.

It establishes the main-axis, thus defining the direction flex items
are placed in the flex container.

Reminder: the main axis of a flex container is the primary axis along
which flex items are laid out. Beware, it is not necessarily
horizontal; it depends on the flex-direction property.

The flex-direction property accepts 4 different values:

row (default): same as text direction row-reverse: opposite to text > direction column: same as row but top to bottom column-reverse: same as row-reverse top to bottom Note that row and row-reverse are
affected by the directionality of the flex container. If its text
direction is ltr, row represents the horizontal axis oriented from
left to right, and row-reverse from right to left; if the direction is
rtl, it's the opposite.

How can I change the display order using the elements of two seperate children divs?

Flexbox can do this but usually not with children of different parents.

However, if you can override the display property of the parents to display:contents then the children can be re-ordered.

contents
These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes
MDN

Support is pretty good now (no IE) - see CanIUse

Essentially, display:contents make the "box" of the parent disappear and the children then become flex-items of the grandparent.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.child {
  background: lightblue;
  border: 1px solid blue;
  padding: 1em;
}

.grand {
  display: flex;
  flex-wrap: wrap;
}

.moved {
  order: 2;
  background: lightgreen;
}

.parent {
  display: contents;
}

.child {
  flex: 0 0 50%;
}

<div class="grand">
  <div class="parent">
    <div class="child moved"> Child 1.1 Moved
    </div>
    <div class="child"> Child 1.2
    </div>
  </div>
  <div class="parent">
    <div class="child"> Child 2.1
    </div>
    <div class="child"> Child 2.2
    </div>
  </div>
</div>

Switching the order of block elements with CSS

As has already been suggested, Flexbox is the answer - particularly because you only need to support a single modern browser: Mobile Safari.

See: http://jsfiddle.net/thirtydot/hLUHL/

You can remove the -moz- prefixed properties if you like, I just left them in for future readers.

    #blockContainer {        display: -webkit-box;        display: -moz-box;        display: box;                -webkit-box-orient: vertical;        -moz-box-orient: vertical;        box-orient: vertical;    }    #blockA {        -webkit-box-ordinal-group: 2;        -moz-box-ordinal-group: 2;        box-ordinal-group: 2;    }    #blockB {        -webkit-box-ordinal-group: 3;        -moz-box-ordinal-group: 3;        box-ordinal-group: 3;    }

    <div id="blockContainer">        <div id="blockA">Block A</div>        <div id="blockB">Block B</div>        <div id="blockC">Block C</div>    </div>

how to reverse two elements position inside ul - li

Here is a jsbin: https://jsbin.com/hijagigave/1/edit?html,css,output

It seems to work with a flex-direction: row; on the li if I explicitly set the attribute dir on an ancestor.

.multiselect-item-checkbox {
  display: flex;
  flex-direction: row;
}

How to reverse the order of elements in responsive mode

You may reverse the order of the items of the second .holder element playing a bit with display: table | table-footer-group | table-header-group.

Try rewriting your media query like so : http://jsfiddle.net/bs5dam2j/

@media (max-width: 400px){

    .holder .card { display: block; }

    .holder + .holder { display: table; }
    .holder + .holder .one { display: table-header-group; } 
    .holder + .holder .three { display: table-footer-group; } 

    /* trick to show .one and .three when they are empty */
    .holder + .holder .card:before {
      display: inline-block;
      content: "";
      height: 100px;
      width: 1px;
    }
}

reversing the order of all elements

You can use flex-direction: row-reverse and justify-content: flex-end

div {  display: flex;  flex:1;  justify-content: flex-end;  flex-direction: row-reverse;}

<div>  <span>1</span>  <span>2</span>  <span>3</span>  <span>4</span>  <span>5</span>  <span>6</span>  <span>7</span>  <span>8</span>  <span>9</span>  <span>10</span></div>

How to reverse the order of elements in media queries?

Try this, it should work the way you wanted. let me know any issues.

.nav{    background-color: red;}.container{    width: 100%;}.left_bottom{    padding: 15px 0 15px 0;    background-color: green;    float: left;    width: 33.33%;    text-align: center;}.right_top{    padding: 15px 0 15px 0;    background-color: blue;    float: right;    width: 66.66%;    text-align: center;}@media (max-width: 500px)    {        .left_bottom{            float: left;            width: 100%;        }        .right_top{            float: left;            width: 100%;        }            }

    <div class='nav'>        <div class='container'>          <div class='right_top'>                RIGHT/TOP            </div>            <div class='left_bottom'>                LEFT/BOTTOM            </div>                    </div>    </div>