Пытаюсь разместить фотографию в одном случае слева, а в другом случае справа. С противоположной стороны от фото - текст.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container">
<div class="row my-4">
<div class="row col-lg-12 my-4">
<div class="col-lg-8">
<img class="embed-responsive" src="http://placehold.it/1024x768" alt="">
</div>
<div class="col-lg-4">
<h3 class="text-center">Название 1</h3>
<div class="text-justify">
<p>Описание1</p>
<div class="text-center">
<a href="#" class="btn btn-primary">Узнать больше</a>
</div>
</div>
</div>
</div>
<div class="row col-lg-12 my-4">
<div class="col-lg-4">
<h3 class="text-center">Название 1</h3>
<div class="text-justify">
<p>Описание2</p>
<div class="text-center">
<a href="#" class="btn btn-primary">Узнать больше</a>
</div>
</div>
</div>
<div class="col-lg-8">
<img class="embed-responsive" src="http://placehold.it/1024x768" alt="">
</div>
</div>
</div>
</div>
При этом на малых экранах всё вытягивается в линию, а на нормальных экранах получается это (как и задумано):
Но с мобильного из-за того, что одно фото в коде стоит перед описанием, а второе - после, получается так, что не ясно, к какому из фото относится текст - всё вытягивается и выходит: фото, название, описание, кнопка + название, описание, кнопка, фото (смотри пример кода выше).
Можно ли как-то сделать так, чтобы на средних и больших экранах фото и текст были слева-справа друг от друга, чередуясь. А на мобильном, вытянувшись, всё шло в одном порядке: фото, название, описание кнопка?