изменение столбцов начальной загрузки на мобильном телефоне с направлением rtl

Question

Я проектирую арабский веб-сайт с файлом начальной загрузки RTL. Все работает хорошо. Однако я сталкиваюсь с очень важной проблемой отображения столбцов сетки начальной загрузки на мобильном устройстве. У меня есть строка с двумя равными столбцами; на больших экранах все прошло хорошо, заголовок справа и абзацы слева. Но на мобильном макете абзац отображается перед заголовком, и я не хочу этого, сначала хочу заголовок, а затем абзацы.

Я пытался применить свойство push and pull, но я не работал. когда я пишу их, я отлично получаю заголовок, но когда я нажимаю на левую сторону (абзацы), он не подталкивает к записи, как должно быть, вместо этого он также идет влево.

Я на самом деле пытался сделать страницу LTR и удалить макет RTL, и это сработало! Однако в моем случае я хочу сделать это с сохранением дисплея RTL.

Так есть ли способ сделать это, кроме как толкать и тянуть ?? или, по крайней мере, это умный трюк, который я могу сделать с помощью тянуть и толкать, чтобы решить проблему ??

>

вот мой код строки:

 <!-- 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 -->

Answer 1

Bootstrap 4 предлагает атрибуты заказа, которые позволяют изменить порядок на мобильных устройствах

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

вытащил из Bootstrap 4, как изменить порядок столбцов?

<div class="row">
  <div class="col-md-12 order-md-2">A</div>
  <div class="col-md-12 order-md-1">B</div>
</div>