How do i move my left element below my middle element on smaller screen (bootstrap)

Question

I want to move my left element(bild) below my middle element(col-md-4),when I shrink the screen. As it is now my picture ends up above my text.

How can i make my left (bild) element end up below my middle element(col-md-4) on small screens?

<div class="container-fluid">

    <div class="headerfilo"></div>
    <div class="row">

        <div class="headfil">
            <div class="col-md-5" style="background-color: #FF9999">Left</div>
            <div class="col-md-4">
                <h3>FILOSOFI</h3>
            </div>
            <div class="col-md-3" style="background-color: #FF9999">Right</div>
        </div>

    </div>
    <div class="row">
        <div class="midfil">
            <div class="col-md-5"> 
                <div id="bild" class="bildfilo"></div>
            </div>
            <div class="col-md-4"> 
                <p>Trivs du med att arbeta agilt, med prestigelöshet och i en platt organisation där dina prestationer syns och uppmärksammas? Då kan  vara företaget för dig. Just nu har vi öppningar på följande positioner men vi är alltid intresserade av nya talanger </p>

                <p>Trivs du med att arbeta agilt, med prestigelöshet och i en platt organisation där dina prestationer syns och uppmärksammas? Då kan vara företaget för dig. Just nu har vi öppningar på följande positioner men vi är alltid intresserade av nya talanger</p>
            </div>
            <div class="col-md-3" style="background-color:#FF9999">Right</div>
        </div>
    </div>
</div>

Questions need question marks "?" It is otherwise unclear what you are asking. — Martin Cowie, Mar 14 '16 at 09:05

score 0 · Accepted Answer · edited May 23 '17 at 12:07

0

Use pull left or pull-right classes for the div you want to relocate.

For more info-

Please refer Bootstrap: change div order with pull-right, pull-left / 3 columns

edited May 23 '17 at 12:07

Community

1
1

answered Mar 14 '16 at 09:22

Priya

1,359
6
21
41

Thank you, found out that i just had to order my elements around to find the answer – Grunter Mar 14 '16 at 13:23

score 0 · Answer 2 · answered Mar 14 '16 at 09:26

You could approach this through 2 simple ways (there are even more, but those are the most easiest which currently came into my mind).

1. You could use Bootstraps build in functionalities

Bootstrap provides you some classes, which affect your markup regarding to your current screen width. That being said, you could 2 containers (1 before and 1 after your main part) which appear to be visible depending on your screen width. In order to do so, you may use .visible-xs-* and .hidden-xs. To learn more, take a look at this.

2. Use your own media rules

Another approach would be to use your own responsive media rules. So this basically means the same as using Bootstraps build in functionality, just without using multiple containers. A simple solution would look like this:

@media (max-width: 760px)  {
  .top {
    position: absolute;
    top: 0;
  }
  .left {
    margin-top: 5em;
  }
}

You can check it in this fiddle as well.

How do i move my left element below my middle element on smaller screen (bootstrap)

2 Answers2