1

.row-flex {
    display: flex;
    align-items: stretch;
    align-content: space-between;
    justify-content: space-between;
    flex-flow: row nowrap;
    box-sizing: border-box;
}

.row-wrap{
  flex-flow: row wrap;
  box-sizing: border-box;
}

.bit-12{
  width: 78%;
  box-sizing: border-box;
  }

.bit-2{
  width: 33.3%;
  box-sizing: border-box;}

.bit-21{
  width: 33.3%;
  box-sizing: border-box;}

.bit-1{
  width: 100%;
  box-sizing: border-box;}

.bit-5{
  width: 66.7%;
  box-sizing: border-box;}

.bit-1, .bit-2{
  height: 250px;
  box-sizing: border-box;}

.bit-3{
  height: 500px;
  box-sizing: border-box;}

[class*="bit-"] {
  padding: .25rem;
  box-sizing: border-box;}

.bit-12, .bit-21{
  background: transparent;
  padding: 0;
  box-sizing: border-box;}

.img-flex{
  background: deepskyblue;
  height: 100%;
  box-sizing: border-box;}
<section>
    <div class="container">
    <div class="row-flex">
      <div class="bit-21">
        <div class="bit-3">
          <div class="img-flex"></div>
        </div>
      </div>
      <div class="bit-12 row-flex row-wrap">
        <div class="bit-2">
          <div class="img-flex"></div>
        </div>
        <div class="bit-2">
          <div class="img-flex"></div>
        </div>
        <div class="bit-2">
          <div class="img-flex"></div>
        </div>
        <div class="bit-5">
          <div class="img-flex"></div>
        </div>
        <div class="bit-2">
          <div class="img-flex"></div>
        </div>
      </div>
    </div>
  </div>
  </section>

Коллеги, добрый день. Помогите пожалуйста сделать, чтобы блоки перестроились на мобильном. Вот пример блоков на desktop, мне нужно, чтобы они просто друг за другом стали одного размера.

2
  • О @media никогда ничего не слышал?
    – Air
    7 фев 2018 в 8:33
  • @Air, я спрашиваю о том, как конкретно flex перестроить например в том же запросе: media only screen and (max-width : 360px)
    – hsnz
    7 фев 2018 в 8:37

2 ответа 2

2

Только измени размер @media screen and (max-width:879px) на тот который тебе надо и при просмотре этого примера разверни на весь экран что бы увидеть разницу. А дальше сам поиграй с @media и добьешься нужного результата.

И кстати, если в head у тя отсутствует <meta name="viewport" content="width=device-width, initial-scale=1">, не забудь добавить. Этот управляет масштабированием в мобильных устройствах

.row-flex {
  display: flex;
  align-items: stretch;
  align-content: space-between;
  justify-content: space-between;
  flex-flow: row nowrap;
  box-sizing: border-box;
}

.row-wrap {
  flex-flow: row wrap;
  box-sizing: border-box;
}

.bit-12 {
  width: 78%;
  box-sizing: border-box;
}

.bit-2 {
  width: 33.3%;
  box-sizing: border-box;
}

.bit-21 {
  width: 33.3%;
  box-sizing: border-box;
}

.bit-1 {
  width: 100%;
  box-sizing: border-box;
}

.bit-5 {
  width: 66.7%;
  box-sizing: border-box;
}

.bit-1,
.bit-2 {
  height: 250px;
  box-sizing: border-box;
}

.bit-3 {
  height: 500px;
  box-sizing: border-box;
}

[class*="bit-"] {
  padding: .25rem;
  box-sizing: border-box;
}

.bit-12,
.bit-21 {
  background: transparent;
  padding: 0;
  box-sizing: border-box;
}

.img-flex {
  background: deepskyblue;
  height: 100%;
  box-sizing: border-box;
}

@media screen and (max-width:879px) {
  .row-flex {
    display: flex;
    flex-direction: column;
  }
}
<section>
  <div class="container">
    <div class="row-flex">
      <div class="bit-21">
        <div class="bit-3">
          <div class="img-flex"></div>
        </div>
      </div>
      <div class="bit-12 row-flex row-wrap">
        <div class="bit-2">
          <div class="img-flex"></div>
        </div>
        <div class="bit-2">
          <div class="img-flex"></div>
        </div>
        <div class="bit-2">
          <div class="img-flex"></div>
        </div>
        <div class="bit-5">
          <div class="img-flex"></div>
        </div>
        <div class="bit-2">
          <div class="img-flex"></div>
        </div>
      </div>
    </div>
  </div>
</section>

1
  • Спасибо. Так и сделал. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> Стоит у меня.
    – hsnz
    7 фев 2018 в 9:03
1

Используй свойство order:

body {
  display: flex;
  flex-direction: column;
}

div[style]:after {
  content: " (" attr(style) ")";
}
<div style="order: 3">A</div>
<div style="order:-7">B</div>
<div                 >C</div>
<div style="order:14">D</div>
<div style="order:-4">E</div>
<div style="order: 0">F</div>
<div                 >G</div>

Ваш ответ

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

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