Последовательное расположение DIV - адаптивный дизайн

[pawok 669]

На сайте установлен адаптивный дизайн,

 

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

 

Как сделать, чтобы два блока располагались последовательно при уменьшении экрана, а не продолжали стоять рядом?

 

____

 

Проблема решена, решение ниже.

[valentino 60]

изменить ширину, она осталась 50% и они стали рядом....

[campusboy 912]

@media (max-width: 450px) {
  div.left, div.right{
    display: block;
    width: 100%;
  }
}

При ширине экрана 450px и ниже ширина блоков станет 100% и примет свойство display: block (возможно, это необязательный параметр).

[valentino 60]

@media (max-width: 450px) {
  div.left, div.right{
    display: block;
    width: 100%;
  }
}

 

@media only screen and (min-width: 450px) {
  div.left, div.right{
    display: block;
    width: 100%;
  }
}

[campusboy 912]

@valentino, с какой целью уточнили? Если в запросе не описан типа устройства, то правило будет применяться ко всем типам устройств. Зачем включать эти правила только для экранов компьютеров, планшетов, смартфонов? Пусть применяется ко всем устройствам   да и кода писать меньше, во всяком случае ситуация это позволяет.

[DevilStar 1161]

Написанный на скорую руку вариант с флексбоксами (становится в столбик на разрешении менее 800px)

 

http://codepen.io/Simushkin/pen/PzywvQ

[pawok 669]

@media (max-width: 450px) {
  div.left, div.right{
    display: block;
    width: 100%;
  }
}

При ширине экрана 450px и ниже ширина блоков станет 100% и примет свойство display: block (возможно, это необязательный параметр).

 

 

Благодарю. Этого оказалось достаточно!