0

I have the following markup

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      content
    </div>
    <div class="col-sm-4">
      sidebar
    </div>
  </div>    
  <div class="row">
    <div class="col-sm-8">
      content
    </div>
    <div class="col-sm-4">
      sidebar
    </div>
  </div>
 </div>

How can i have the content section sit on top of the sidebar for mobile view? for example with the above markup ill get the following in mobile view (stack)

<div class="col-sm-8">
  content
</div>
<div class="col-sm-4">
  siderbar
</div>
<div class="col-sm-8">
  content
</div>
<div class="col-sm-4">
  siderbar
</div>

but i want to achieve the following for mobile view

<div class="col-sm-8>
  content
</div>
<div class="col-sm-8">
  content
</div>
<div class="col-sm-4">
  sidebar
</div>
<div class="col-sm-4">
  sidebar
</div>

I've seen this done before but just forgot. Thanks everyone

hello world
  • 1,727
  • 6
  • 21
  • 37

2 Answers2

1

After multiple attempts of just experimenting I found this way.

I decided to remove one whole row and squeeze all the contents in col-sm-8 and all the sidebar content in col-sm-4

<div class="col-sm-8">
 content
 content
</div>
<div class="col-sm-4">
 sidebar
 sidebar
</div>
hello world
  • 1,727
  • 6
  • 21
  • 37
0

The you are defining the behaviour for your columns to be the same for all displays. If you want them to appear differently, you've got to use them accordingly. The sm part of your css class name tells you how you want to render on that particular size of screen. So you use xs for very small screens, s for small screens, md for medium and so on.

Changing your markup to this should do the trick, I've always found best to play around with it a bit by changing your browser size or with some nifty browser addon. I changed your columns a bit, because it seems to me like you would want your content and sidebar to take the whole width of the screen on a mobile device.

<div class="container">
  <div class="row">
    <div class="col-md-8 col-sm-12">
      content
    </div>
    <div class="col-md-4 col-sm-12">
      sidebar
    </div>
  </div>    
  <div class="row">
    <div class="col-md-8 col-sm-12">
      content
    </div>
    <div class="col-md-4 col-sm-12">
      sidebar
    </div>
  </div>
 </div>

See this codepen snippet for reference: http://codepen.io/anon/pen/VLoMML

You can specify different layouts for each of the bootstrap supported different screen sizes, xs being good for mobile phones, x being good for tablets, md being good for regular sized computer screens and l for large displays. The documentation is really quite comprehensive: http://getbootstrap.com/css/#grid

Pavlin
  • 5,390
  • 6
  • 38
  • 51
  • thanks for bringing the other screen classes, i forgot all about them. However youre still displaying `content sidebar content siderbar` for mobile view to where as i want to achieve `content content sidebar sidebar` for mobile view – hello world Aug 24 '15 at 23:31
  • After tinkering around a little bit, I don't think it's possible with just bootstrap. You can reorder columns, but within the same row. The push and pull classes work there, but I've come up with a blank to your exact problem. – Pavlin Aug 24 '15 at 23:40
  • i've tried wrapping everything in one `row` class, do you think that'll work? I haven't finished yet. – hello world Aug 24 '15 at 23:43
  • I wasn't able to do what you want even without rows. There's no good way to reorder the elements once you make them span 12 columns, reordering only works if you have more of them in the same actual row. – Pavlin Aug 24 '15 at 23:49
  • how would you solve this problem in your own way? I cant seem to think of anything either..... – hello world Aug 24 '15 at 23:54
  • Take a look at this question: http://stackoverflow.com/questions/220273/use-css-to-reorder-divs It seems to do reordering but you would need to do some magic, because this solution only works with 3 containers. Otherwise, you could always just write a simple script to swap out the contents of your containers. There must be some better ways of doing it, these are just off the top of my head. – Pavlin Aug 24 '15 at 23:59
  • i found a solution to my answer – hello world Aug 25 '15 at 00:01
  • Please share, I am curious and it may help somebody else in the future. – Pavlin Aug 25 '15 at 00:02
  • just posted, was simpler than i thought – hello world Aug 25 '15 at 00:05