Выровнять текст и фото

Question

Хорошо, я часами искал в Google, как выровнять эти два объекта по-разному, но безуспешно. Я хочу, чтобы изображения были слева, а текст - справа. Align = "" на самом деле ничего не делал. Это раздел в HTML:

 <section class="site-section about-us-section" id="about-us-section">
  <div class="container">

    <div class="row mb-5 pt-0 site-section">
      <div class="col-md-6 align-self-center">
        <h3 class="section-title-sub text-primary">About Us</h3>
        <h2 class="section-title mb-4">More Details On</h2>

        <p>Soluta quasi cum delectus eum facilis recusandae nesciunt molestias accusantium libero dolores repellat id in dolorem laborum ad modi qui at quas dolorum voluptatem voluptatum repudiandae.</p>
        <p>Soluta quasi cum delectus eum facilis recusandae nesciunt molestias accusantium libero dolores repellat id in dolorem laborum ad modi qui at quas dolorum voluptatem voluptatum repudiandae.</p>
        <p class="mt-4"><a href="#" class="spepcial_link">Read more about us</a></p>
      </div>
      <div class="col-md-5 ml-auto img-overlap">
        <div class="img-1"><img src="images/sq_img_6.png" alt="Image" class="img-fluid img-shadow"></div>
        <div class="img-2"><img src="images/sq_img_10.png" alt="Image" class="img-fluid img-shadow"></div>
      </div>
    </div>

Вот изображение текущей ситуации: Фотография

Я надеюсь, что вы, ребята, можете помочь мне решить ее.

Спасибо.

Answer 1

Используйте для этого Flex-box. flex-flow:row-reverse свойство размещать элементы в обратном порядке. Надеюсь это поможет. Дайте мне знать, если какие-либо вопросы.

.site-section{
    display: flex;
    flex-wrap: wrap;
    flex-flow: row-reverse;
    align-items: baseline;
}

.align-self-center{
  width:80%;
}

.img-overlap{
  width:20%;
}

<section class="site-section about-us-section" id="about-us-section">
  <div class="container">

    <div class="row mb-5 pt-0 site-section">
      <div class="col-md-6 align-self-center">
        <h3 class="section-title-sub text-primary">About Us</h3>
        <h2 class="section-title mb-4">More Details On</h2>

        <p>Soluta quasi cum delectus eum facilis recusandae nesciunt molestias accusantium libero dolores repellat id in dolorem laborum ad modi qui at quas dolorum voluptatem voluptatum repudiandae.</p>
        <p>Soluta quasi cum delectus eum facilis recusandae nesciunt molestias accusantium libero dolores repellat id in dolorem laborum ad modi qui at quas dolorum voluptatem voluptatum repudiandae.</p>
        <p class="mt-4"><a href="#" class="spepcial_link">Read more about us</a></p>
      </div>
      <div class="col-md-5 ml-auto img-overlap">
        <div class="img-1"><img src="images/sq_img_6.png" alt="Image" class="img-fluid img-shadow"></div>
        <div class="img-2"><img src="images/sq_img_10.png" alt="Image" class="img-fluid img-shadow"></div>
      </div>
    </div>
  </div>
</section>

Answer 2

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

 <section class="site-section about-us-section" id="about-us-section">

      <div class="col-md-6 align-self-center">
        <h3 class="section-title-sub text-primary">About Us</h3>
        <h2 class="section-title mb-4">More Details On</h2>
        <p>Soluta quasi cum delectus eum facilis recusandae nesciunt molestias accusantium libero dolores repellat id in dolorem laborum ad modi qui at quas dolorum voluptatem voluptatum repudiandae.</p>
        <p>Soluta quasi cum delectus eum facilis recusandae nesciunt molestias accusantium libero dolores repellat id in dolorem laborum ad modi qui at quas dolorum voluptatem voluptatum repudiandae.</p>
        <p class="mt-4"><a href="#" class="spepcial_link">Read more about us</a></p>
      </div>
      <div class="col-md-5 ml-auto img-overlap">
        <div class="img-1"><img src="images/sq_img_6.png" alt="Image" class="img-fluid img-shadow"></div>
        <div class="img-2"><img src="images/sq_img_10.png" alt="Image" class="img-fluid img-shadow"></div>
      </div>
</section>

#about-us-section {
    display: flex;
    align-items: center;
    justify-content: center;
}
.align-self-center {
    width: 50%;
}

Flexbox идеально подходит для этих случаев. Проверьте эту ручку - https://codepen.io/orby32/pen/MWYLaap?editors=1100