Как изменить расположение подписи к фото?

Question

[Magnus Keef]

Привет. Есть такая верстка.

<div class="content__text_4 mx-auto ">
       
        <div><p>"Среди других стран-участниц Чемпионата мира по футболу значительный всплеск интереса к путешествиям в Россию показали Аргентина, Египет, Марокко, Бразилия, Мексика и Саудовская Аравия. </p></div>
        
        <div><img src="../img/news/div-img.png"></div> 
    </div>

.content__text_4 p{
    float: left;
    max-width: 201px;
    color: #999EA5;
    font-family: "Source Sans Pro";
    font-size: 14px;
    letter-spacing: -0.25px;
    line-height: 22px;
}
.content__text_4 img{
    margin-left: 10px;
    max-width: 890px;
}

Фото и подпись к фото слеваЭто десктопная версия.

В мобильной версии необходимо подпись расположить под фото.

Comments

[ProjectSoft]

самое простое. Ни каких float. Верстаете с помощью flex и используете замечательное свойство для дочерних элементов - order.

Рано или поздно, но вам всё-таки нужно будет познакомится с flex

Answer 1

[hellcaster]

1. Зафлоатить на desctop версии фото, а на мобильной сделать float: none
   
2. Сделать через flexbox. На мобильной сделать по-обычному, а на desctop сделать родитель display: flex
   

P.S. лучше второй вариант

Comments

[Magnus Keef]

сделал через flexbox