0

Есть такая проблема с flex-wrap.

В контейнере у меня 3 блока, в маленьком разрешении экрана надо что бы центральный блок был первым.

Есть способ добиться этого только с помощью flex, без использования js?

Вот сам пример:

/* Common Styles */
.content {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    text-align: center;
}

.content div {
    height: 50%;
    width: 50%;
}
.red {
    background: orangered;
}
.green {
    background: yellowgreen;
}
.blue {
    background: steelblue;
}

/* Flexbox Styles */
.content {
    display: flex;
    flex-wrap: wrap;
}
.content1 {
    display: flex;
    flex-wrap: nowrap;
}
.content2 {
    display: flex;
    flex-wrap: wrap-reverse;
}
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

1 ответ 1

1

@media screen and (max-width: 767px) {
  .green {
    order: -1;
  }
}

2
  • Спасибо, то что хотел. 22 апр 2019 в 14:39
  • @RazGalstyan, не за что, желаю успехов!
    – meine
    22 апр 2019 в 14:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.