Как менять местами элементы?

Question

[Богдан]

Здравствуйте, подскажите пожалуйста, мне нужно чтобы в адаптиве сайта, красный текст был ниже кнопки, это можно реализовать если этот параграф написать под кнопкой в html. Но в таком случае, на большом разрешении (где мне нужно чтобы текст был сбоку (у него стоит значение position: absolute) этот текст тоже находится ниже, что мне не подходит.
Вообщем вопрос заключается в том, как сделать так, чтобы при разрешении 1920px параграф был выше кнопки, а на условных 1400px наоборот (кнопка выше параграфа)?

Answer 1

[Andrey Vasilev]

у меня есть div в котором лежат 2 кнопки, у него там свои свойства display и тд.

Comments

[Богдан]

Спасибо большое! Заработало!

Answer 2

[WapSter]

FlexBox order или Grid layout grid-template-areas

Answer 3

[xenonhammer]

Самый простой способ это как уже было сказано, flexBox order или grid' ы. Для этого делаете обертку, т.е. создаете див и туда кладете параграф и кнопку. И вешаете на обертку флексы или гриды. И используя медиа запросы меняете значения. Медиа запросы как раз и нужны, для того чтобы меня классы

Comments

[Богдан]

Спасибо, только есть одна проблема, у меня есть div в котором лежат 2 кнопки, у него там свои свойства display и тд. Параграф лежит отдельной от div, потому что свойства div с кнопками ему не подходят. По этому как мне объединить в один div одну кнопку и параграф? Они ведь тогда будут оба наследовать div в котором кнопки?

[xenonhammer]

Пересмотрите, структуру, этот как кубики собирать, всегда есть множество решений с проектированием верстки.

[Богдан]

xenonhammer, Ну я не могу понять как тут можно по другому собрать. Мне нужно в любом случае чтобы две кнопки были в одном блоке. Так как там используются параметры display и просто назначить такие же параметры отдельно для каждого элемента не получится.

<p class="invise">Нужно следить!</p>
<div class="btn">
a href="https://i.imgur.com/" class="btn_first" target="_blank">Следить за мной</a>
<a href="#" id="btn_second" class="btn_second">Не следить за мной</a>
</div>

[Andrey Vasilev]

underlower, снизу ответил. просто нужно сделать обертку, ничего страшного