1

i am designing an Arabic website with an rtl bootstrap display file. Every thing works good. However i face a very important problem displaying bootstrap grid columns on mobile. I have a row with two equal columns; on large screens it went well, the header on the right and the paragraphs on the left. But on mobile layout the paragraph is displaying before the heading, and i don't want this, i want the heading first, and then the paragraphs.

i tried to apply the push and pull property, but i didn't work. when i write them i get the pull of the heading perfectly, but when i do push in the left side(paragraphs) it doesn't push to the write as it should be, instead, it goes also to the left.

i actually tried to make the page LTR and remove the RTL layout, and it worked! However in my case, i want to do it with keeping the RTL display.

So Is there a way to do this other than push and pull?? or at least is the a smart trick i can do with pull and push to handle the problem??

>

here is my row code:

 <!-- First row -->
                    <div class="row "  >
                        <!-- العمود اليسار -->
                         <div class="col-md-6 col-sm-push-6 ">
                            <div id="about-left" >
                               <p>في حين أن أنكنولوجيا التيالبرمجيات</p>
                                <p>في حين أننا لا يمكن.</p>
                            </div>
                        </div>

                        <!-- العمود اليمين -->
                         <div class="col-md-6 col-sm-pull-6  ">
                            <div id="about-right">
                              <!--heading of the about section -->
                                <div class="verticl-heading">
                                    <h5> من نكون؟ </h5>
                                    <h2>نبذة عن <br>
                                      <strong>انـي</strong>
                                    </h2>
                                </div>
                                 
                            </div>
                        </div>
                      

                        
                    </div>
                    <!-- Second row -->
Rawhani
  • 21
  • 7

1 Answers1

1

Bootstrap 4 offers ordering attributes that let you reverse the order on mobile devices

https://getbootstrap.com/docs/4.0/layout/grid/#order-classes

pulled from Bootstrap 4, how reverse the order of columns?

<div class="row">
  <div class="col-md-12 order-md-2">A</div>
  <div class="col-md-12 order-md-1">B</div>
</div>
Thomas Skubicki
  • 536
  • 4
  • 12