Поміняйте позицію DIV лише на CSS

Я намагаюся поміняти divмісця розташування двох s на адаптивний дизайн (сайт виглядає по-різному залежно від ширини браузера / добре для мобільних пристроїв).

Зараз у мене щось подібне:

<div id="first_div"></div>
<div id="second_div"></div>

Але чи можна було б поміняти місця розташування, щоб це здавалося second_divпершим, лише за допомогою CSS? HTML залишається незмінним. Я намагався використовувати поплавці та інше, але, здається, це працює не так, як я хочу. Я не хочу використовувати абсолютне позиціонування, оскільки висоти divs завжди змінюються. Чи є якісь рішення, або просто неможливо це зробити?

Хтось пов’язав мене так: Який найкращий спосіб перемістити елемент, що знаходиться зверху вниз, у адаптивному дизайні .

Рішення в цьому спрацювало ідеально. Хоча він не підтримує старий IE, це для мене не важливо, оскільки я використовую адаптивний дизайн для мобільних пристроїв. І це працює для більшості мобільних браузерів.

В основному, у мене було таке:

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

Це працювало краще, ніж плаваючі для мене, тому що мені потрібні були вони накладені один на одного, і я мав близько п'яти різних div, які мені довелося поміняти місцями.

Це питання вже має чудову відповідь, але в дусі вивчення всіх можливостей тут є ще одна техніка для перестановки елементів дому, в той же час дозволяючи їм займати свій простір, на відміну від методу абсолютного позиціонування.

Цей метод працює у всіх сучасних браузерах та IE9 + (в основному в будь-якому браузері, що підтримує display: table), він має недолік, що його можна використовувати лише максимум на 3 братах і сестрах.

//the html    
<div class='container'>
    <div class='div1'>1</div>
    <div class='div2'>2</div>
    <div class='div3'>3</div>
</div>

//the css
.container {
   display:table;    
}
.div1 {
    display:table-footer-group;
}
.div2 {
    display:table-header-group;
}
.div3 {
    display:table-row-group;
}

Це змінить порядок елементів з 1,2,3 на 2,3,1. В основному все, що з дисплеєм, встановленим на table-header-group, буде розташоване вгорі, а table-footer-group внизу. Зазвичай таблиця-рядок-група ставить елемент посередині.

Цей метод швидкий, має хорошу підтримку і вимагає набагато менше css, ніж підхід flexbox, тому, якщо ви, наприклад, хочете поміняти лише кілька елементів навколо мобільного макета, тоді не виключайте цю техніку.

Ви можете ознайомитися з демонстрацією в реальному часі на codepen: http://codepen.io/thepixelninja/pen/eZVgLx

Прийнята відповідь спрацювала для більшості браузерів, але з якихось причин у браузерах iOS Chrome та Safari вміст, який повинен був показати другим, був прихований. Я спробував кілька інших кроків, які змушували вміст складати один на одного, і врешті-решт я спробував таке рішення, яке дало мені передбачуваний ефект (змінити порядок відображення вмісту на екранах мобільних пристроїв), без помилок накопиченого або прихованого вмісту:

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

.section1,
.section2 {
  height: auto;
}

Лише за допомогою CSS:

#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>

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

У деяких випадках ви можете просто скористатися flex-boxвласністю order.

Дуже просто:

.flex-item {
    order: 2;
}

Див .: https://css-tricks.com/almanac/properties/o/order/

Якщо припустити, що за ними нічого не йде

Якщо ці два divелементи в основному є вашими основними елементами макета, і нічого за ними не слід у html, то існує чисте рішення HMTL / CSS, яке приймає нормальний порядок, показаний у цій скрипті, і може перевертати його вертикально, як показано в цій скрипті, використовуючи одна додаткова обгортка приблизно divтак:

HTML

<div class="wrapper flipit">
   <div id="first_div">first div</div>
   <div id="second_div">second div</div>
</div>

CSS

.flipit {
    position: relative;
}
.flipit #first_div {
    position: absolute;
    top: 100%;
    width: 100%;
}

Це не буде працювати , якщо елементи слідують цим ДІВ, оскільки ця скрипка ілюструє проблему , якщо такі елементи не обгорнуті (вони отримують перекриті #first_div), і цю скрипка ілюструє проблему , якщо такі елементи також обгорнуті ( #first_divзмінює позицію і #second_div та наступні елементи ). Ось чому, залежно від вашого випадку використання, цей метод може працювати, а може і не працювати.

Для загальної схеми макетування, де всі інші елементи існують усередині двох div, це може працювати. Для інших сценаріїв це не буде.

Це рішення спрацювало для мене:

Використання батьківського елементу, наприклад:

.parent-div {
    display:flex;
    flex-direction: column-reverse;
}

У моєму випадку мені не довелося змінювати css елементів, які мені потрібно було переключити.

припускаючи, що обидва елементи мають 50% ширини, ось що я використав:

css:

  .parent {
    width: 100%;
    display: flex;
  }  
  .child-1 {
    width: 50%;
    margin-right: -50%;
    margin-left: 50%;
    background: #ff0;
  }
  .child-2 {
    width: 50%;
    margin-right: 50%;
    margin-left: -50%;
    background: #0f0;
  }

html:

<div class="parent">
  <div class="child-1">child1</div>
  <div class="child-2">child2</div>
</div>

приклад: https://jsfiddle.net/gzveri/o6umhj53/

До речі, такий підхід працює для будь-яких 2-х сусідніх елементів у довгому списку елементів. Наприклад, у мене довгий список елементів з 2 елементами на рядок, і я хочу, щоб кожен 3-й та 4-й елементи у списку були помінені місцями, щоб він відображав елементи в шаховому стилі, тоді я використовую наступні правила:

  .parent > div:nth-child(4n+3) {
    margin-right: -50%;
    margin-left: 50%;
  }
  .parent > div:nth-child(4n+4) {
    margin-right: 50%;
    margin-left: -50%;
  }