Как сделать нечетные / четные столбцы в Bootstrap 4?

Question

У меня есть раздел, который должен содержать изображение слева и текст справа, а в следующем столбце я имею в виду противоположный, я имею в виду текст слева и изображение справа. Это мой HTML:

<section>
        <div class="container">
            <div class="row no-gutters">
                <div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
                <div class="col-md-6">
                    <div class="feature-desc">
                        <p>text</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="feature-desc">
                        <p>text</p>
                    </div>
                </div>
                <div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
                <div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
                <div class="col-md-6">
                    <div class="feature-desc">
                        <p>text</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="feature-desc">
                        <p>text</p>
                    </div>
                </div>
                <div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
            </div>
        </div>
    </section>

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

Что делать?

Answer 1

Для этого вы должны использовать служебные классы заказа flexbox. Flexbox Order Bootstrap

Откройте фрагмент в полноэкранном режиме.

добавлять order-2 order-md-1 к тексту и order-1 order-md-2 изображать. Кроме того, чтобы это работало, я должен был обернуть текст и изображение с div с классом row

order-2 order-md-1 означает, что на самых маленьких устройствах сделайте заказ по пункту 2, а на среднем и после этого сделайте заказ 1

Обновление: вы можете добавить align-items-center грести вертикально по центру

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<section>
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-6 ">
        <img src="https://placehold.it/100x100" alt="" class="img-fluid">
      </div>
      <div class="col-md-6 ">
        <div class="feature-desc">
          <p>text</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 order-2 order-md-1">
        <div class="feature-desc">
          <p>text</p>
        </div>
      </div>
      <div class="col-md-6 order-1 order-md-2">
        <img src="https://placehold.it/100x100" alt="" class="img-fluid">
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <img src="https://placehold.it/100x100" alt="" class="img-fluid">
      </div>
      <div class="col-md-6">
        <div class="feature-desc">
          <p>text</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 order-2 order-md-1">
        <div class="feature-desc">
          <p>text</p>
        </div>
      </div>
      <div class="col-md-6 order-1 order-md-2">
        <img src="https://placehold.it/100x100" alt="" class="img-fluid">
      </div>
    </div>
  </div>
</section>