Как управлять расположением блоков при адаптивной верстке?

Question

[lamernoob]

Доброго времени суток. Есть блок div и картинка, как сделать так, чтобы при нормальной ширине окна они были в одну строчку, а, например, на телефоне в столбец? При этом, когда текст находится в строке, он должен быть выровнен по вертикали относительно изображения.

<div>
         <img src="/data/images/1.png">
          <div>
                <h2>Текст</h2>
                <p>текст</p>
          </div>        
</div>

Answer 1

[danila_prokopenko]

Если ты только начал учить html\css, то почитай про медиа запросы

Comments

[lamernoob]

С медиа запросами знаком, не понимаю как это в общем оформить и во что обернуть. Копал в сторону flexbox, но толком ничего не получилось

Answer 2

[Антон]

<style>
img{vertical-align: middle;}
@media (max-width: 600px) {span{display:block;}}
</style>
<div>
    <img src="https://avatars.mds.yandex.net/get-yapic/30061/WoC18IUowxzmydVWvbPgtA9vS3Y-1/islands-retina-50"/>
    <span>Добрый день!</span>
</div>

min-width: 600px

max-width: 600px