Правильный способ обернуть текст под изображение в Bootstrap 4?

Question

Использования Bootstrap 4 альфа 6, я хочу, чтобы показать свидетельство, содержащий:

• Слева: лицо фото
• Справа: цитаты, название и логотип компании (выравнивание по левому краю)

То есть на планшете и на рабочем столе ширина. Но, когда ширина окна сжимается, я хочу уложить набор, чтобы изображение было сверху текста, и каждая часть выравнивается по центру.

В настоящее время, это мой код ...

<!-- testimonial --> 
<div class="container-fluid cxt-padded bg-faded"> 
    <div class="container"> 
    <div class="media"> 
     <img class="d-flex mr-4 rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image"> 
     <div class="media-body"> 
     <p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <a href="#">link</i></a></p> 
     <h2 class="mt-0">Joe Smith</h2> 
     <img src="http://placehold.it/150x40" class="img-fluid" width="150"> 
     </div> 
    </div> 
    </div> 
</div> 

Это успешно производит следующий результат при ширине рабочего стола ...

Однако, когда сжался, устройство выглядит это ...

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

Этот код является медиа-объектом.

Я также попытался использовать две колонки для достижения этой цели - одна из ширины 2, а другой 10 ...

<!-- testimonial --> 
<div class="container-fluid cxt-padded bg-faded"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-2 text-center"> 
     <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image"> 
     </div> 
     <div class="col-md-10 text-center"> 
     <p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <a href="#" target="_blank"><i class="material-icons md-inverse pmd-sm">link</i></a></p> 
     <h2 class="mt-0">Joe Smith</h2> 
     <img src="http://placehold.it/150x40" class="img-fluid" width="150"> 
     </div> 
    </div> 
    </div> 
</div> 

... Это успешно производит правильный вид результата на мобильной ширине .. .

... Тем не менее, а) Я не уверен, правильно ли это наценка, и б) Это означает, что текст центрируется даже при ширине рабочего стола, который не подходит. ..

Я путаться о правильном подходе, будь то/когда я должен использовать IMG-жидкость по сравнению с фиксированной шириной изображения и т.д. Может я текст быть выровнен по-разному в зависимости от ширины браузера/останова ?

Материал d-flex/mr-auto, я не привязан к нему. Это было скопировано из документа документации Bootstrap 4 для медиа-объекта.

Каков путь?

Answer 1

«Правильный» подход является субъективным, но вы можете использовать отзывчивые утилиты для изменения выравнивания текста на разных точках останова. text-md-left сохранит выравнивание по левому краю на больших экранах, а затем используйте text-center, чтобы сосредоточиться на меньших экранах.

<!-- testimonial --> 
<div class="container-fluid cxt-padded bg-faded"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-2 text-md-left text-center"> 
     <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image"> 
     </div> 
     <div class="col-md-10 text-md-left text-center"> 
     <p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <a href="#" target="_blank"><i class="material-icons md-inverse pmd-sm">link</i></a></p> 
     <h2 class="mt-0">Joe Smith</h2> 
     <img src="http://placehold.it/150x40" class="img-fluid" width="150"> 
     </div> 
    </div> 
    </div> 
</div> 

http://www.codeply.com/go/tuTd2OiZFx