Начальная загрузка чередующихся строк с использованием nth-of-type

Question

Я пытаюсь изменить порядок столбцов начальной загрузки, чтобы они чередовались в каждой строке.Это легко сделать, если это плоский сайт, но я использую цикл WP, поэтому нужно настроить таргетинг на все остальные столбцы с помощью CSS.

Мой текущий код приведен ниже, но, похоже, он нацелен на каждый .odd.элемент не просто любой другой элемент.Я пробовал ребенка и введите.

HTML

<div class="alternate">
        <div class="jumbotron jumbotron-fluid">
          <div class="container">
            <div class="services-content row">
                    <div class="col-8 odd"><?php echo $content; ?></div>
                    <div class="col-4 even"><img src="<?php echo $image ?>" /></div>
                </div>
          </div>
        </div>
        <div class="jumbotron jumbotron-fluid">
          <div class="container">
            <div class="services-content row">
                    <div class="col-8 odd"><?php echo $content; ?></div>
                    <div class="col-4 even"><img src="<?php echo $image ?>" /></div>
                </div>
          </div>
        </div>
</div>

CSS

.alternate .odd:nth-of-type(odd){
    order: 1;
}

Конечно, кодвыше показано только одно «нечетное», но раздел jumbotron повторяется много раз (я только что удалил PHP).

Может кто-нибудь увидеть, что не так?Я думаю, что это вопрос с вложенностью может быть?

Answer 1

Используйте nth-child(odd) на jumbotron и выберите col-8 для чередования столбцов.

.jumbotron:nth-child(odd) .col-8 {
  order: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="alternate">
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <div class="row">
        <div class="col-8">
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis molestias numquam, culpa, ullam sed quia facilis debitis fuga dolore obcaecati tenetur asperiores? Aspernatur, fugit veritatis? Fugit ex aspernatur velit dolorem?
          </p>
        </div>
        <div class="col-4"><img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/1/19/XA-UHZ_%286908943182%29.jpg" /></div>
      </div>
    </div>
  </div>
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <div class="row">
        <div class="col-8 ">
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis molestias numquam, culpa, ullam sed quia facilis debitis fuga dolore obcaecati tenetur asperiores? Aspernatur, fugit veritatis? Fugit ex aspernatur velit dolorem?
          </p>
        </div>
        <div class="col-4"><img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/1/19/XA-UHZ_%286908943182%29.jpg" /></div>
      </div>
    </div>
  </div>
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <div class="row">
        <div class="col-8">
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis molestias numquam, culpa, ullam sed quia facilis debitis fuga dolore obcaecati tenetur asperiores? Aspernatur, fugit veritatis? Fugit ex aspernatur velit dolorem?
          </p>
        </div>
        <div class="col-4"><img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/1/19/XA-UHZ_%286908943182%29.jpg" /></div>
      </div>
    </div>
  </div>
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <div class="row">
        <div class="col-8 ">
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis molestias numquam, culpa, ullam sed quia facilis debitis fuga dolore obcaecati tenetur asperiores? Aspernatur, fugit veritatis? Fugit ex aspernatur velit dolorem?
          </p>
        </div>
        <div class="col-4"><img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/1/19/XA-UHZ_%286908943182%29.jpg" /></div>
      </div>
    </div>
  </div>
</div>

Проверьте фрагмент кода в полноэкранном режиме.

Answer 2

.alternate .jumbotron:nth-child(odd) .odd {
border: 1px solid red;
}

<div class="alternate">
        <div class="jumbotron jumbotron-fluid">
          <div class="container">
            <div class="services-content row">
                    <div class="col-8 odd">odd</div>
                    <div class="col-4 even">test</div>
                </div>
          </div>
        </div>
        <div class="jumbotron jumbotron-fluid">
          <div class="container">
            <div class="services-content row">
                    <div class="col-8 odd">odd</div>
                    <div class="col-4 even">test</div>
                </div>
          </div>
        </div>
         <div class="jumbotron jumbotron-fluid">
          <div class="container">
            <div class="services-content row">
                    <div class="col-8 odd">odd</div>
                    <div class="col-4 even">test</div>
                </div>
          </div>
        </div>
</div>