Как сделать такую сетку на FLEX?

Question

[Cheizer]

Подскажите пожалуйста, как сделать такую сетку на CSS FLEX? Не понимаю как так сделать.



Почему нужно именно так, потому как на мобиле, ТРЕТИЙ блок всегда должен быть последним :( поэтому на декстопе такая странная сетка нужна. Можно прятать блок на декстопе и показывать на мобиле, но не хочется два одинаковых блока ради сортировки делать.
На мобиле так должно быть

Comments

[Алекс Глебов]

если надо чтоб по высоте было ровно всегда, то бери грид

[Mesuti]

<div class="wrap">
  <div>
    <div class="item">1</div>
    <div class="item">2</div>
  </div>
  <div>
    <div class="item">3</div>
  </div>
</div>

[Cheizer]

Mesuti, так нельзя, на мобиле ТРЕТИЙ блок всегда внизу должен быть :( в этом проблема. А на мобиле они по вертикали выстраиваются.

Answer 1

[Александр]

Почему бы не использовать гриды?
UPD:

Comments

[Cheizer]

ради этого блока подключать бострап библиотеку?

[Арсений Матыцин]

Роман Кузнецов, что за бред? https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

[Cheizer]

Арсений Матыцин, не понимаю, тот же бострап.

[Cheizer]

Арсений Матыцин, Вот https://grid.layoutit.com/ генератор грид сетки, я даже там не могу сделать ту которая мне нужна.

[Александр]

Роман Кузнецов, Окей, я Вас понял.

[Арсений Матыцин]

[Cheizer]

Александр, Благодарю!

Answer 2

[origami1024]

Можно и без гридов, используй flex-wrap и order

Comments

[Cheizer]

БЛАГОДАРЮ! Эту лучше! Гриды в IE 11 не работают половина стилей.

[Александр]

Роман Кузнецов, почитайте про autoprefixer. Если очень захотеть, много что сделать можно.

[Cheizer]

Александр, да для flex и так использую его.