Как изменить порядок div-ов на мобильном устройстве Bootstrap?

Question

[Zwed]

Хотел бы узнать возможно ли вообще реализовать мою задумку без .hidden-md. При загрузке страницы есть три дива (самый длинный справа, два поменьше слева один над другим вертикально (всё вышеупомянутое это один ряд)), но при уменьшении экрана хотел бы получить один див (самый длинный) во весь экран, под ним в один ряд два маленьких, те которые были слева до этого.
Вот чего добился сейчас:

<div class="container-fluid">
        <div class="row">
          <!--Main (news)-->
          <div class="col-md-8 col-sm-8 col-sm-push-4">
            <img class="media-object" id="img_newspaper" src="img/newspaper.png" alt="1.vidusskola - jaunumi">
            <h1 id="title_jaunumi">Aktualitates/Jaunumi</h1>
            <div class="line_gradient line_gradient_news"></div>
            aaaa
          </div>
          <!--Main (news)-->
          <!--Left sidebar-->
          <div class="col-md-4 col-sm-4 col-sm-pull-8">
            <img class="media-object" id="img_calendar" src="img/calendar.png" alt="1.vidusskola - pasakumu kalendars">
            <h1 id="title_pasakumu_kalendars">Pasakumu kalendars</h1>
            <div class="line_gradient line_gradient_news"></div>
            bbbb
          </div>
          <div class="col-md-4 col-sm-4">
            <img class="media-object" id="img_cup" src="img/cup.png" alt="1.vidusskola - sasniegumi">
            <h1 id="title_sasniegumi">Sasniegumi</h1>
            cccc
          </div>
          <!--Left sidebar-->
        </div>
      </div>

И вот как это выглядит:

А вот как должно:

Answer 1

[alex-1917]

Я тебе просто посоветую на маленьких экранах не наниматься херней и делать все блоки шириной в 100%, все равно твои ужимки по два в ряд никто не оценит - будут зумить и проклинать.
Если не понятно, просто открой свой макет на реальном устройстве, забудь про онлайн-имитаторы моб. устройств!
Если и сейчас не понятно, открой на смартфоне любой адекватный сайт например apple.com

Мало того, что затея бредовая, так еще и в своих рисунках с ног на голову, такой путаницы я давно не видел...

Answer 2

[Илья Мясин]

У вас в "а вот как должно" как-то дофига всего =) Поэтому вопрос не понял, а отвечаю, ориентируясь на заголовок =)

Менять порядок дивов без JS можно при помощи свойства order из flexbox. Например, если мы хотим на мобиле сделать блок "Pasakumu kalendars" первым (по порядку DOM-дерева он второй), мы делаем следующее:

1) устанавливаем родителю display:flex
2) устанавливаем блоку order: -1
3) ну и оборачиваем это все в @media

пен

И надо понимать, что с этого момента мы сами себе злобные буратины, а бутстрап типа снимает с себя всякую ответственность, потому что мы полезли его переопределять. Так что достаточная специфичность селекторов и контроль за вылезающими ушами бустрапа на вашей совести.