McDuck4 McDuck4 - 3 months ago 7
CSS Question

Change the order in mobile devices

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>

Answer

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>