0

I have a jsfiddle as an example.

<div class="col-md-8" style="background-color:lavender;">COL-MD-8</div>
<div class="col-md-4" style="background-color:lavenderblush;">COL-MD-4</div>

When the width of the screen is wide and both divs are beside eachother, that's how it should look like. But when the screen width is narrow the "col-md-4" jumps down under the other one, i would like to have it on top of the "col-md-8" when it is on a narrow width. How could i achieve this?

So when width is wide then it should be on the right site of the col-md-8 but when narrow on top of the other div and not in the bottom.

Jordan.J.D
  • 7,999
  • 11
  • 48
  • 78

2 Answers2

1
<div class="row">
    <div class="col-md-4 col-md-push-8 col-xs-12">first</div>
    <div class="col-md-8 col-md-pull-4 col-xs-12">second</div>
</div>

like this the "first" will be positioned in the second part of the row in large screen, while it will be on top on smaller ones.

Dani
  • 84
  • 1
  • 14
0

You can switch the two divs, then apply a float:right on your col-md-4. When you reach small width, you just have to delete the float. ie :

HTML :

<div class="col-md-4 large_right" style="background-color:lavenderblush;">COL-MD-4</div>
<div class="col-md-8" style="background-color:lavender;">COL-MD-8</div>

CSS :

@media (min-width: 992px) {
.large_right {
float: right;
}
}
samfrend
  • 29
  • 4