change bootstrap grid direction dynamically ( ltr to rtl or reverese)

There is a possibility to use bootstrap which it's grid flow order is Rtl if the site language is fa , and use Ltr when the language is English ?

By language , I mean this : www.example.com/en or www.example.com/ar

when it is /en , we must use bootstrap which is Ltr (Left to right )

when it is /fa , we must use bootstrap which is Rtl (Right to left)

Solution 

put this style sheet in case of using RTL

html[dir="rtl"] .row > .col-xs-1, html[dir="rtl"] .row > .col-xs-2, html[dir="rtl"] .row > .col-xs-3, html[dir="rtl"] .row > .col-xs-4, html[dir="rtl"] .row > .col-xs-5, html[dir="rtl"] .row > .col-xs-6, html[dir="rtl"] .row > .col-xs-7, html[dir="rtl"] .row > .col-xs-8, html[dir="rtl"] .row > .col-xs-9, html[dir="rtl"] .row > .col-xs-10, html[dir="rtl"] .row > .col-xs-11, html[dir="rtl"] .row > .col-xs-12 {
  float: right;
}
@media (min-width: 768px) {
  html[dir="rtl"] .row > .col-sm-1, html[dir="rtl"] .row > .col-sm-2, html[dir="rtl"] .row > .col-sm-3, html[dir="rtl"] .row > .col-sm-4, html[dir="rtl"] .row > .col-sm-5, html[dir="rtl"] .row > .col-sm-6, html[dir="rtl"] .row > .col-sm-7, html[dir="rtl"] .row > .col-sm-8, html[dir="rtl"] .row > .col-sm-9, html[dir="rtl"] .row > .col-sm-10, html[dir="rtl"] .row > .col-sm-11, html[dir="rtl"] .row > .col-sm-12 {
    float: right;
  }
}
@media (min-width: 992px) {
  html[dir="rtl"] .row > .col-md-1, html[dir="rtl"] .row > .col-md-2, html[dir="rtl"] .row > .col-md-3, html[dir="rtl"] .row > .col-md-4, html[dir="rtl"] .row > .col-md-5, html[dir="rtl"] .row > .col-md-6, html[dir="rtl"] .row > .col-md-7, html[dir="rtl"] .row > .col-md-8, html[dir="rtl"] .row > .col-md-9, html[dir="rtl"] .row > .col-md-10, html[dir="rtl"] .row > .col-md-11, html[dir="rtl"] .row > .col-md-12 {
    float: right;
  }
}
@media (min-width: 1170px) {
  html[dir="rtl"] .row > .col-lg-1, html[dir="rtl"] .row > .col-lg-2, html[dir="rtl"] .row > .col-lg-3, html[dir="rtl"] .row > .col-lg-4, html[dir="rtl"] .row > .col-lg-5, html[dir="rtl"] .row > .col-lg-6, html[dir="rtl"] .row > .col-lg-7, html[dir="rtl"] .row > .col-lg-8, html[dir="rtl"] .row > .col-lg-9, html[dir="rtl"] .row > .col-lg-10, html[dir="rtl"] .row > .col-lg-11, html[dir="rtl"] .row > .col-lg-12 {
    float: right;
  } 

 from the other hand  pull-right and pull-left for RTL languages

You can override .pull-right class to float to the left when it appears after an rtl element. Like this: .rtl { direction: RTL; } .rtl .pull-right { float:left !important; } And your div element: id="div2" class="alert alert-info rtl"> هذا هو بلدي وصف الهوى class="badge badge-info">122 class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa"> class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"> Here is a FIDDLE Alternatively, you can do it using javascript: (Using your same code just add javascript) $(document).ready(function() { $('.pull-right').each(function() { if($(this).parent().css('direction') == 'rtl') $(this).attr('style', 'float:left !important'); }); });