Нужно поменять блоки местами. Как это сделать?

Question

[Михаил]

Заранее извиняюсь, если уже задавали этот вопрос. Я тут новенький и пока разбираюсь.
Как поменять изображение и текст местами?
На первом скрине: как есть.



На втором: как должно.

Код выглядит так:


Спасибо!

Comments

[Kotaro Hiba]

Если чисто средствами CSS .wrapper добавь flex-direction: row-reverse
Почитай побольше про flexbox и grid
https://tpverstak.ru/flex-cheatsheet/
https://fls.guru/flexbox.html
https://habr.com/ru/post/313938/

С гридами аналогично

[0xD34F]

3.8

[Илья]

Лучше не делать это через flex-direction: row-reverse

Answer 1

[Борис Шпаковский]

Если вам нужно это сделать принципильно через CSS, то используйте для wrapper такой свойство:

.wrapper {
flex-direction: row-reverse;
}

Но лучше внутрь враппера закиньте какой-нибудь row, если у вас будут еще врапперы. Либо повесьте дополнительный класс на него. А еще лучше сделайте структуру с колонками.

<div class="row">
<div class="column">Тут контент с картинкой</div>
<div class="column">Тут контент с текстом</div>
<div>

Тут подробнее про свойство:
https://cssreference.io/property/flex-direction/

Если же задача просто поменять местами, то просто поменяйте картинку и блок текста в самой разметки и всё.

Comments

[Михаил]

Спасибо, помогло. Только теперь иной вопрос:
Как выровнять текст по левому краю?

Пытался гуглить, что-то вспомнить, но уже 5 утра, голова не соображает, а доделать хочется)

[Борис Шпаковский]

Михаил, читайте дальше про флексбоксы и о том как они выравниваются:
https://webdesign.tutsplus.com/ru/tutorials/a-comp...