Как вставить Div в кирпичную стену Flexbox, не нарушая логику Nth-Child?

Question

Я хочу вводить случайным образом (с помощью jquery) div полной ширины bigbrick класса. Теперь происходит то, что после вставки .bigbrick div вся логика nth-child прерывается. Как я могу добавить bigbrick, не ломая все над ним?

Есть несколько повторяющихся вопросов о том, как заставить flexbox сломаться для div, но никто не говорит о последствиях с элементами, наступающими после.

Пример ниже - это то, что я сейчас должен проиллюстрировать. Все, что выше bigbrick, не отформатировано правильно.

body {
  display: flex;
  min-height: 100%;
  background: #ffffff;

}

html {
  min-height: 100%;
}

.flex-container {
  padding: 0;
  width: 1200px;
  min-width:1200px;
  height: auto;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

.flex-container li {
  background: brown;
  padding: 5px;
  width: 300px;
  height: 110px;
  border: 5px solid #fff;
  line-height: 30px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  box-sizing: border-box;
}

.bigbrick {
  background: gold!important;
  padding: 5px;
  width: 1200px!important;
  height: 240px;
  border: 5px solid #fff;
  line-height: 30px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  box-sizing: border-box;
  display: block!important;

}

.flex-container li:nth-child(9n),
.flex-container li:nth-child(9n+5) {
  width: 150px;
}

.flex-container {
  counter-reset: my-counter;
}

.flex-container li:before {
  counter-increment: my-counter;
  content: counter(my-counter);
} 

<ul class="flex-container wrap-reverse">

  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li> </li>
  <li></li>
  <div class="bigbrick">Big Brick</div>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
  

Answer 1

Измените li, чтобы вместо него использовать span, затем рассмотрите nth-of-type, и вы не будете влиять на логику при добавлении div (это другой тип элемента).

Изменение li на span должно сделать ваш код действительным.

body {
  display: flex;
  min-height: 100%;
  background: #ffffff;
}

html {
  min-height: 100%;
}

.flex-container {
  padding: 0;
  width: 1200px;
  min-width: 1200px;
  height: auto;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

.flex-container span {
  background: brown;
  padding: 5px;
  width: 300px;
  height: 110px;
  border: 5px solid #fff;
  line-height: 30px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  box-sizing: border-box;
}

.bigbrick {
  background: gold!important;
  padding: 5px;
  width: 1200px!important;
  height: 240px;
  border: 5px solid #fff;
  line-height: 30px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  box-sizing: border-box;
  display: block!important;
}

.flex-container span:nth-of-type(9n),
.flex-container span:nth-of-type(9n+5) {
  width: 150px;
}

.flex-container {
  counter-reset: my-counter;
}

.flex-container span:before {
  counter-increment: my-counter;
  content: counter(my-counter);
}

<div class="flex-container wrap-reverse">

  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span> </span>
  <span></span>
  <div class="bigbrick">Big Brick</div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>