переставить разные div по-разному

Question

Я хочу составить div по-разному для маленьких экранов, и я хочу использовать css для него.

Я хочу добиться следующего:

• для одногостраница, div class="three должна идти под .header
• для другой страницы (использует тот же код), * ​​1012 * должна идти над .header

Мне удалось только сделать .two выше .header, но в результате я не могу сделать .three ниже .header на моей другой странице (фактический результат заключается в том, что .three также помещаетсяВЫШЕ .header из-за моего css кода).Как исправить?

@media(max-width: 460px) {
    .container {
        display: flex;
        flex-direction: column;
    }

    .header {
        order: 2;
    }
}

<div class="body">
    <div class='container'>
        <div class='header'>
            <div class="one">
                one
            </div>
            hello
        </div>
        <div class='sidebar'>
            <div class="two">
                two
            </div>
            <div class="three">
                three
            </div>
        </div>
    </div>
</div>

Answer 1

То, что вам нужно, сложно, потому что ваш HTML группирует элементы два и три.

Самое лучшее решение - это изменить ваш HTML.

На всякий случай, если это невозможно, выможет установить обходной путь с помощью display: содержимое элемента боковой панели (это делает элемент исчезающим из потока)

@media(max-width: 4600px) {
    .container {
        display: flex;
        flex-direction: column;
        background-color: lightblue;
    }

    .header {
        order: 2;
    }
    .three {
        order: 3;
    }
    .sidebar {
        display: contents;
    }
}

<div class="body">
    <div class='container'>
        <div class='header'>
            <div class="one">
                one
            </div>
            hello
        </div>
        <div class='sidebar'>
            <div class="two">
                two
            </div>
            <div class="three">
                three
            </div>
        </div>
    </div>
</div>

Answer 2

Ваши two и three находятся в пределах в делении, называемом sidebar.Вы не можете удалить их из этого div и упорядочить их с помощью header, используя CSS, потому что header не того же уровня, что и они.Возможно, вам стоит подумать о реструктуризации вашего HTML?

Я немного исправил ваш пример, чтобы показать вам, что я имею в виду.

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

.header {
  order: 2;
}

.two {
  order: 1;
}

.three {
  order: 3;
}

<div class="body">
  <div class='container'>
    <div class='header'>
      <div class="one">
        one
      </div>
      hello
    </div>
    <div class="two">
      two
    </div>
    <div class="three">
      three
    </div>
  </div>
</div>