Как сделать 2 блока в ряд?

Question

[Max Shteklya]

Как сделать 2 блока в ряд, но что бы если страница меньше 300px то блок №2 опускается под блок №1

Comments

[Ankhena]

Тут все хорошо изложено https://html5book.ru/css3-flexbox/

Answer 1

[Nevada18]

я так понимаю, у блоков фиксированная ширина. флексами.
flex-wrap: wrap

Comments

[Max Shteklya]

нет,не фиксированая. ну как , в процентах

[Иван]

BedOmar: медиазапросы

[Max Shteklya]

Иван: Что это?)

[Nevada18]

BedOmar: гуглите

Answer 2

[Никита Кит]

<div class='wrapper'>
<div class='wrapper__item'></div>
<div class='wrapper__item'></div>
</div>

.wrapper{
width: 100%;
display: flex;
justify-content: center;
 @media(max-width: 320px){
    flex-direction: column
  }
  &__item{
    @media(min-width: 321px){
      width: 50%;
    }
    @media(max-width: 320px){
      width: 100%;
    }
  }
}

Сверху sass. Если в чистый css, то заюзайте https://www.sassmeister.com/

Comments

[Max Shteklya]

а как его заюзать?

[Max Shteklya]

уже нашёл

[Max Shteklya]

у меня второй блок перекидывается на верх, нужно вниз

[Никита Кит]

BedOmar: Если хочешь контролировать порядок, то дай wrapper__item дополнительный класс и добавь ему свойство order (значение от 0 до сколько хош)

[Никита Кит]

BedOmar: вообще желательно изучи стайлгайд по флексбоксам чтоб забыть о бутстрапах и самому научиться пилить потоки элементов интерфейса.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[Никита Кит]

BedOmar: ещё ты можешь перевернуть порядок через flex-direction: column-reverse. Вариантов куча. Ознакомься с гайдом - у тебя отпадут все вопросы