CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Wessel van der Linden
Wessel van der Linden

Reputation: 2622

Responsive div order

I am new to the bootstrap grid system, and I want to reorder the <div> regions for mobiles.

This is the layout I have for the desktop view:

current column layout

And this is what I want for mobile phones:

resized column layout

My current HTML code:

<div class="col-md-3">
  <div id="A">  A  </div>
  <div id="B">  B  </div>
</div>

<div class="col-md-9">
  C
</div>

Currently, if I view the page on a mobile phone the order is A->B->C because A & B are both inside the first column. But I don't know how to achieve the A->C->B order. So how do I do this?

Upvotes: 0

Views: 133

Answers (2)

nbarth
nbarth

Reputation: 334

This probably isn't the most elegant way to go about it, but you could just hide element B when switching to mobile and show a different element B with the same content that's below element C in the dom by using bootstrap's "hidden-xs" and "visible-xs" classes. Something like this...

<div class="row">
     <div class="col-md-3 col-xs-12">
       <div id="A">  A  </div>
       <div id="B" class="hidden-xs">  B  </div>
     </div>

     <div class="col-md-9 col-xs-12">
       C
     </div>
     <div id="B" class="col-xs-12 visible-xs">  B  </div>
</div>

I'd also recommend referring to the the official bootstrap documentation for more info

Upvotes: 2

magic_al
magic_al

Reputation: 2190

The md in col-md-9 stands for medum devices, which means all devices with a screen resulution up to 992px.

Here you will find a table with col-xs, col-sm. col-md and col-lg resultions.

You can use them to define col-xs-12 to your elements. This will tell the browser that on devices which apply to the xs definition the column takes all the 12 grid parts. You can apply several rules like for example:

<div class="col-xs-12 col-md-6">foo</div>

This means the element is 12 on xs and 6 on md devices.

Upvotes: 0

Related Questions