CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
MHK
MHK

Reputation: 320

Bootstrap 3 div order change on mobile view

I am using BOOTSTRAP 3, I put 2 div(s):
1. <div class="col-md-4">1</div>
2. <div class="col-md-8">2</div>

Which looks like this :
enter image description here

Now, if I change the resolution to mobile or tablet view it looks like this :
enter image description here

The problem starts here for me. I want the order of div in mobile that div[2] on the top and div[1] on bottom.

PS: I'm using direction:rtl.

Upvotes: 0

Views: 1564

Answers (2)

wandering-geek
wandering-geek

Reputation: 1380

When designing responsive websites, always design mobile-first. which means your HTML code represents the layout on a mobile device.

So keep div[2] first, and div[1] second by default. And then change their behaviour on larger screen sizes.

So, you can modify your code as follows:-

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

On mobile, both divs have equal widths, and div[2] will appear before div[1](referring to your diagram). But on desktop and above, div[2] will be pushed to the right, and div[1] will be pulled to the left, resulting in the desired order.

Hope this helps! :-)

Upvotes: 4

KAD
KAD

Reputation: 11112

When using rigth to left direction in bootstrap you will need to create a custom bootstrap css for alignments where you shall make stylings for classes float:right rather than left

This can be a hard task, depending on you css knowledge.

You can also check this library which may help bootstrap rtl.

Upvotes: 1

Related Questions