по-разному перемещайте разные разделы

#css

Вопрос:

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

Чего я хочу добиться, так это следующего:

для одной страницы div class="three должен находиться под .header
для другой страницы (использует тот же код) div class="two" должен располагаться выше .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>

1. При таких проблемах всегда лучше иметь чистый html. Есть ли у вас какие-либо ограничения в манипулировании html и поэтому вы ищете чисто css-решение?

2. С flexbox это невозможно, если все элементы (заголовок, два и три) не находятся в одном контейнере flex, чего здесь нет.

Ответ №1:

Ваши two и three находятся внутри в вызываемом div sidebar . Вы не можете удалить их из этого div и упорядочить с помощью header using 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>

Ответ №2:

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

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

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

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