Как реализовать колонки по разным сторонам bootstrap?

Question

[highlighter77]

Здравствуйте! Как сделать так, чтобы содержимое колонок располагалось по разным сторонам? И в мобильной версии друг над другом становилось в итоге. Если менять местами и получается каша. Спасибо!

<div class="site-section">
      <div class="container">
      <div class="row">
      <div class="col-sm-8"> <img src="https://oboi.ws/filters/kelvin_14_8511_oboi_skakun_1366x768.jpg" class="img-fluid"></div>
      <div class="col-sm-4">
      <div class="text py-5">
        <h2 class="font-family-serif h3 mb-3">Заголовок</h2>
              <p>Текст.</p>
             </div>
              </div>
              </div>
              <p></p>
  <div class="row">
              <div class="col-sm-8"> <img src="https://oboi.ws/filters/kelvin_14_8511_oboi_skakun_1366x768.jpg" class="img-fluid"></div>
    <div class="col-sm-4">
        <div class="text py-5">
              <h2 class="font-family-serif h3 mb-3">Заголовок</h2>
              <p>Текст</p>
             </div>
              </div>
              </div>    
</div> 
</div>

Answer 1

[Bodrosh]

В bootstrap есть классы для сортировки ( https://getbootstrap.com/docs/4.0/layout/grid/#reo... ), можно воспользоваться свойством nth-child, если свое что-то писать.

Comments

[highlighter77]

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

[Bodrosh]

highlighter77, Чем вам не нравится вариант в первом случае написать колонки

<div class="col-sm-8">...</div>
<div class="col-sm-4">...</div>

а во втором

<div class="col-sm-4">...</div>
<div class="col-sm-8">...</div>

А для мобильной версии добавить классы bootstrap для смены колонок (они могут от версии зависеть, напр. col-sm-push(pull)-8 и смотрите документацию)