Изменение порядка групп столбцов в bootstrap

Question

У меня есть контент, который выглядит так на больших экранах:

1 2

3 4

5 6

И я хочу, чтобы выглядят так на небольших экранах

1

2

3

4

5

6

Но вместо этого это выглядит так:

1

3

5

2

4

6

Как я могу это снять?

Мой html выглядит примерно так:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <p> Content1 </p>
      <div class="row">
        <div class="col-sm-4">
          <img src="Content3-img" alt="">
        </div>
        <div class="col-sm-8">
          <p> Content3 </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <img src="Content5-img" alt="">
        </div>
        <div class="col-sm-8">
          <p> Content5 </p>
        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <p> Content2 </p>
      <div class="row">
        <div class="col-sm-4">
          <img src="Content4-img" alt="">
        </div>
        <div class="col-sm-8">
          <p> Content4 </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <img src="Content6-img" alt="">
        </div>
        <div class="col-sm-8">
          <p> Content6 </p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

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

<div class="container">
 <div class="row">
  <div class="col-lg-6">
   <!--Your content-->
  </div>
  <div class="col-lg-6">
   <!--Your content-->
  </div>
  <div class="col-lg-6">
   <!--Your content-->
  </div>
  .
  .
  .
 </div>
</div>

Answer 2

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="row">
                <div class="col-sm-4">
                    <img src="Content1-img" alt="">
                </div>
                <div class="col-sm-8">
                    <p> Content 1 </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="row">
                <div class="col-sm-4">
                    <img src="Content2-img" alt="">
                </div>
                <div class="col-sm-8">
                    <p> Content 2 </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="row">
                <div class="col-sm-4">
                    <img src="Content3-img" alt="">
                </div>
                <div class="col-sm-8">
                    <p> Content 3 </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="row">
                <div class="col-sm-4">
                    <img src="Content4-img" alt="">
                </div>
                <div class="col-sm-8">
                    <p> Content 4 </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="row">
                <div class="col-sm-4">
                    <img src="Content5-img" alt="">
                </div>
                <div class="col-sm-8">
                    <p> Content 5 </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="row">
                <div class="col-sm-4">
                    <img src="Content6-img" alt="">
                </div>
                <div class="col-sm-8">
                    <p> Content 6 </p>
                </div>
            </div>
        </div>
    </div>
</div>