Перемещение DIV с использованием только CSS

Question

Мне нужно переместить элемент DIV внизу тела, но я не могу изменить структуру HTML.Я думал, что какой-то существующий поток может помочь мне, поскольку они объясняют, что именно я ищу, но в моем случае это не работает: Перемещение div снизу вверх, используя только css .Я мог бы что-то упустить.

Вот моя страница: https://www.tr -architecte.fr / page-220-auriples-drome

<section>
  <article class="container-fluid">
    <div class="row">...</div>
    <div class="txt">...</div>
    <div class="gallery">...</div>
  </article>
</section>

Соответствующий элементDIV.txt.Я хочу, чтобы он был размещен сразу после div.gallery, но не могу сделать это вручную, поскольку галерея фотографий генерируется автоматически внизу.Хотя я могу изменять классы и стили.

Дайте мне знать, если вам нужно больше информации.

Answer 1

Flexbox может сделать это:

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

.container-fluid * {
  order: 1;
}

.txt {
  order: 2;
}

<section>
  <article class="container-fluid">
    <div class="row">1. Row</div>
    <div class="txt">2. Text</div>
    <div class="gallery">3. Gallery</div>
  </article>
</section>

Answer 2

Если вы не можете изменить html-структуру, в которой она находится, у меня есть решение.

Не самое лучшее, я не рекомендую его, но здесь оно звучит:

position: absolute;

Это относится к div с классом .row, который содержит ваш текст.После абсолютной позиции вы должны использовать bottom: - something px и left: something px.Затем вы идете в ваш div с id: social и генерируете padding-top: something px.

То, что я использовал для проверки:

Это на .row

position: absolute;
left: 450px;
bottom: -535px;

Это на #social

padding-top: 200px;

Как я уже сказал, это плохая практика, и я не рекомендую ее, но, поскольку у вас нет доступа к html, это ваш выбор.