Здравствуйте. У меня структура постов: 4 маленьких и 2 больших, а затем 4 маленьких, 1 большой и 2 маленьких. Дело в том, что я не знаю что и на каких разрешениях экрана писать в медиа-запросы. Я не понимаю что мне нужно уменьшить или увеличить.
На разрешении с 974 до 730 вёрстка ломается. Шаблон верстаю сам для себя. К нему не прилагалось как и что должно выглядеть на 768, 480 и 320.
До 768 у меня не получается, чтобы стояло 4 маленьких потом 2 больших, а затем 4 маленьких, 1 большой и 2 маленьких.
.news {
max-width: 980px;
min-height: 500px;
background-color: gray;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.postSmall {
flex-basis: 210px;
height: 266px;
background-color: #fff;
display: inline-block;
margin: 17px;
}
.postBig {
flex-basis: 455px;
height: 266px;
background-color: #fff;
display: inline-block;
margin: 17px;
}
/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) {}
/* Extra Small Devices, Phones */
@media only screen and (min-width: 480px) {}
/* Small Devices, Tablets */
@media only screen and (min-width: 768px) {}
/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<section class="news">
<div class="postSmall"></div>
<div class="postSmall"></div>
<div class="postSmall"></div>
<div class="postSmall"></div>
<div class="postBig"></div>
<div class="postBig"></div>
<div class="postSmall"></div>
<div class="postSmall"></div>
<div class="postSmall"></div>
<div class="postSmall"></div>
<div class="postBig"></div>
<div class="postSmall"></div>
<div class="postSmall"></div>
</section>
А с 768 вот так:
Подскажите что делать? Вот сама проблема: