Change the order in mobile devices

Question

I have made this bootstrap code. But i cannot figure out how I on sm and xs viewports change the order, so the picture div is going under the Headline div.

Does anybody know how i can do that?

https://plnkr.co/edit/yDwXuk1mia7JUVVEJ7kY?p=preview

  <body class="landingpage">
    <div class="background-image" style="background-image: url('http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg?anchor=center&amp;mode=crop&amp;width=2000&amp;height=1200&amp;rnd=131160348720000000');"></div>
    <div class="top-area" style="border: 4px solid red;">
      <div class="container">
        <div class="row">
          <div class="col-sm-4" style="border: 4px solid pink;">
            Logo
          </div>
            <div class="container">
              <div class="row">
                <div class="col-sm-12" style="border: 4px solid yellow;">
                  <p>Picture</p>
                </div>
                <div class="col-sm-6 col-sm-pull-6" style="border: 4px solid blue;">
                  <p class="header-xl center">
                    HEADLINE TEXT 
                  </p>
                  <p class="sub-header center">
                    Subline text
                  </p> 
                </div>
              </div>
            </div>
    </div>
  </body>
</html>

Ifran · Accepted Answer · 2016-08-19T01:13:44.090

Create another div under the headline with "visible-sm" and "visible-xs" class and add "hidden-sm" and "hidden-xs" to the first div

  <body class="landingpage">
    <div class="background-image" style="background-image: url('http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg?anchor=center&amp;mode=crop&amp;width=2000&amp;height=1200&amp;rnd=131160348720000000');"></div>
    <div class="top-area" style="border: 4px solid red;">
      <div class="container">
        <div class="row">
          <div class="col-sm-4" style="border: 4px solid pink;">
            Logo
          </div>
            <div class="container">
              <div class="row">
                <div class="col-sm-12 hidden-sm hidden-xs" style="border: 4px solid yellow;">
                  <p>Picture</p>
                </div>
                <div class="col-sm-6 col-sm-pull-6" style="border: 4px solid blue;">
                  <p class="header-xl center">
                    HEADLINE TEXT 
                  </p>
                  <p class="sub-header center">
                    Subline text
                  </p> 
                </div>
                <div class="col-sm-12 visible-sm visible-xs" style="border: 4px solid yellow;">
                <p>Picture</p>
                </div>
              </div>
            </div>
    </div>
  </body>
</html>

EDIT: Solution of Ricardo Ruiz in comments is a much better solution

Thank you a lot for your answer. I just tried out the code, but I can see there is a picture above the headline and under the headline. I did not describe it enough with the bigger devices. When it reach Ipad size the order should be normal, which means how my code is. So can I delete the last Picture class you made? — McDuck4, Aug 18 '16 at 22:52
Remove the "hidden-sm" and "visible-sm" classes. That way when viewed on iPad the picture will appear above the headline. — Ifran, Aug 18 '16 at 23:09
I think [this](http://stackoverflow.com/a/18070242/4305494) is a much nicer solution. Instead of loading two images. — Ricky Ruiz, Aug 18 '16 at 23:59
@Ricardo Ruiz That is indeed a much nicer solution. Thanks for the input. — Ifran, Aug 19 '16 at 01:12

score 2 · Answer 2 · answered Aug 18 '16 at 22:54

@media (max-width: 767px) {
  .sm-col-reorder { display: flex; flex-direction: column; }
  .sm-order-1 { order: 1; }
  .sm-order-2 { order: 2; }
}

<div class="background-image" style="background-image: url('http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg?anchor=center&amp;mode=crop&amp;width=2000&amp;height=1200&amp;rnd=131160348720000000');"></div>
<div class="top-area" style="border: 4px solid red;">
  <div class="container">
    <div class="row">
      <div class="col-sm-4" style="border: 4px solid pink;">
        Logo
      </div>
      <div class="container">
        <div class="row sm-col-reorder">
          <div class="col-sm-12 sm-order-2" style="border: 4px solid yellow;">
            <p>Picture</p>
          </div>
          <div class="col-sm-6 col-sm-pull-6 sm-order-1" style="border: 4px solid blue;">
            <p class="header-xl center">
              HEADLINE TEXT
            </p>
            <p class="sub-header center">
              Subline text
            </p>
          </div>
        </div>
      </div>
    </div>

Thank you a lot for your answer. It is actually totally what I would like. If you have time to look at my code here: https://plnkr.co/edit/yDwXuk1mia7JUVVEJ7kY?p=preview .. When it reach md, the picture and headline tag is going to be beside eachother instead. Can I incorporate that in your code? I did not work with flex-direction before :-/ — McDuck4, Aug 18 '16 at 23:06
flex-direction is important there to have one block below other. You can check some flexbox guide, e.g. [css-tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). Please, also check compatibility with browsers, that it is alright for you. Otherwise, Cytex01's solution is much more better and should work everywhere. — Maju, Aug 18 '16 at 23:33

Change the order in mobile devices

2 Answers2