У вас в "а вот как должно" как-то дофига всего =) Поэтому вопрос не понял, а отвечаю, ориентируясь на заголовок =)
Менять порядок дивов без JS можно при помощи свойства
order из flexbox. Например, если мы хотим на мобиле сделать блок "Pasakumu kalendars" первым (по порядку DOM-дерева он второй), мы делаем следующее:
1) устанавливаем родителю
display:flex
2) устанавливаем блоку
order: -1
3) ну и оборачиваем это все в
@mediaпен
И надо понимать, что с этого момента мы сами себе злобные буратины, а бутстрап типа снимает с себя всякую ответственность, потому что мы полезли его переопределять. Так что достаточная специфичность селекторов и контроль за вылезающими ушами бустрапа на вашей совести.
