Как вытащить определенные блоки из списка (адаптивная верстка)?

Question

[nepster-web]

Есть список блоков в ряд (5 блоков по 20%).
При адаптации необходимо 2 и 4 блоки вытащить вверх, а остальные спустить вниз.

К сожалению возникла трудность с данной реализацией.

Подскажите как это можно максимально просто сделать?

Наработка:
https://jsfiddle.net/8bjy116n/

(блоки 2 и 4 необходимо оставить наверху когда для них не будет места, а остальные сдвинуть под них).

Comments

[copal]

пошлите просто нифиг тех кто Вас заставляет это делать. Жопашные создатели браузеров сами курят, а Вам говорят что нужно делать мобайл ферст. Это полная херня, заверяю я Вам, ведь нельзя сделать чтобы даже слово обрезалось с точками, но зато можно пи*ть о мобайл ферст.

Пусть сначала сделают, а потом требуют.

Answer 1

[Андрей Федоров]

codepen.io/aliencash/pen/mVXXWB

Answer 2

[Kuat Mustafin]

Легко :)

<div class="content">
  <div class="item">
    1
  </div>
  <div class="item">
    2
  </div>
  <div class="item">
    3
  </div>
  <div class="item">
    4
  </div>
  <div class="item">
    5
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-flow: wrap;
      -ms-flex-flow: wrap;
          flex-flow: wrap;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  width: 95%;
  margin: auto;
}
.item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: calc(100% / 5);
  min-width: 200px;
  height: 250px;
  border: 1px solid #f00;
  margin: 15px 5px;
}
@media screen and (max-width: 800px) {
  .item:nth-child(1) {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3;
  }
  .item:nth-child(2) {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }
  .item:nth-child(3) {
    -webkit-box-ordinal-group: 5;
    -webkit-order: 4;
        -ms-flex-order: 4;
            order: 4;
  }
  .item:nth-child(4) {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }
  .item:nth-child(5) {
    -webkit-box-ordinal-group: 6;
    -webkit-order: 5;
        -ms-flex-order: 5;
            order: 5;
  }
}

Пример на codepen.io

Подробнее про FlexBox : Frontender

Comments

[Илья Пирожок]

Браво