Как сохранить DIV во flexbox в первом ряду?

Question

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

Мой пример кода

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: DodgerBlue;
}

.flex-container>div {
  background-color: #f1f1f1;
  width: 100px;
  text-align: center;
  margin: 10px auto;
  line-height: 75px;
  font-size: 30px;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div style="background-color:#CC0000">7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

Как сделать так, чтобы красный DIV 7 оставался всегда в первой строке?

Если у вас есть идея, поделитесь ею со мной , Спасибо.

Answer 1

mediaquer ie и заказ может помочь

средний пример:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: DodgerBlue;
}

.flex-container>div {
  background-color: #f1f1f1;
  width: 100px;
  text-align: center;
  margin: 10px auto;
  line-height: 75px;
  font-size: 30px;
}

.flex-container>div {
  order: 0
}

body div.flex-container>div:nth-child(7) {
  order: 1
}

.flex-container>div:nth-child(7)~div {
  order: 2
}

@media screen and (max-width:720px) {
  .flex-container>div:nth-child(5)~div {
    order: 2
  }
}

@media screen and (max-width:615px) {
  .flex-container>div:nth-child(4)~div {
    order: 2
  }
}

@media screen and (max-width:515px) {
  .flex-container>div:nth-child(3)~div {
    order: 2
  }
}

@media screen and (max-width:425px) {
  .flex-container>div:nth-child(2)~div {
    order: 2
  }
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div style="background-color:#CC0000">7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>

</div>