Ответ 1

Немного сложно, но может работать; просто чтобы дать вам идею:

div#top-to-bottom {
    position: absolute;
    width:50px;
    text-align: left;
    float: left;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
div#top-to-bottom > div {
    width: 50px;
    height: 50px;
    position: relative;
    float: right;
    display: block;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

зеркало в вертикальной оси как контейнера, так и дочерних элементов. Ребенок следуют за инвертированной осью y контейнера, но сами дети снова поднимаются вверх.

демонстрация

Ответ 2

Современный ответ

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

Ответ 3

<style>
#parent{
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: row-reverse;
}
</style>

Ответ 4

Решение только для CSS: (я переключил все селекторы на селектор классов, чтобы не заниматься проблемами специфики, которые могут возникнуть. Просто моя привычка и другие. Я также удалил стили, не относящиеся к пример.)

.top-to-bottom {
    position: absolute;
}

.child {
    width: 50px;
    height: 50px;
    margin-top: -100px; /* height * 2 */
}

.child:nth-child(1) {
    margin-top: 150px; /* height * ( num of childs -1 )  */
}

.a {
    background:blue;

}
.b {
    background:red;
}

.c {
    background:purple;
}

.d {
    background:green;
}

Демо: http://jsfiddle.net/zA4Ee/3/

Решение для Javascript:

var parent = document.getElementsByClassName('top-to-bottom')[0],
    divs = parent.children,
    i = divs.length - 1;

for (; i--;) {
    parent.appendChild(divs[i])
}

Демо: http://jsfiddle.net/t6q44/5/

Ответ 5

Вы можете сделать это с помощью чистого CSS, но есть серьезные оговорки. Попробуйте использовать один из следующих способов, но оба имеют обратную сторону:

• Плавание ваших разделов вправо. Это будет работать, только если ваши элементы отображаются горизонтально. Он также сдвинет ваши элементы вправо. Как только вы очистите их или вернете их в обычный поток документов, заказ вернется.
• Используя абсолютное позиционирование. Это сложно для элементов, которые не имеют определенной высоты.

Плавающее право изменит порядок, в котором они отображаются горизонтально. Вот демон jsFiddle.

<div id="parent">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

#parent div {
    float: right;
}

Абсолютное положение вырвет элементы из обычного потока документов и позволит вам точно позиционировать по вашему выбору. Здесь демонстрационная версия.

Ответ 6

Здесь более простой, более портативный, полностью префиксный ответ на @vals. Обратите внимание, что CSS3 2D Transforms поддерживает только 94% по состоянию на февраль 2017 года.

.reverse, .reverse>* {
  -moz-transform: scale(1, -1);
  -webkit-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

<div class="reverse">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
</div>

Ответ 7

display: table-header-group; display: table-footer-group;

для детей

display: table;

для родительского

Ответ 8

Чтобы основываться на ответах flex, представленных здесь, здесь представлено полное кросс-браузерное решение по Autoprefixer:

#parent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
} 

Ответ 9

Это еще один простой современный способ. Наслаждайтесь!

#parent{
     /* Just set display flex to parent div */
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
      
     /* Use this part if you need also a column direction */
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
}

/* This way you can decide the order of the internal divs */
#parent div:nth-child(1){
    -webkit-order: 4;
    -ms-order: 4;
    order: 4;
}
#parent div:nth-child(2){
    -webkit-order: 3;
    -ms-order: 3;
    order: 3;
}
#parent div:nth-child(3){
    -webkit-order: 2;
    -ms-order: 2;
    order: 2;
}
#parent div:nth-child(4){
    -webkit-order: 1;
    -ms-order: 1;
    order: 1;
}

 
<div id="parent">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
</div>

Ответ 10

100% работают этот код:

<style type="text/css">
    .wrapper {
       display: flex;
       flex-direction: column;
    }
</style>

<div class="wrapper">
   <div class="main">top</div>
   <div class="footer">bottom</div>
</div>

Ответ 11

Используйте abosolute positioning и верхний левый