Question

我正在设计一个带有rtl引导显示文件的阿拉伯语网站。一切正常。但是，我在移动设备上显示引导网格列时遇到一个非常重要的问题。我有一排，两排相等；在大屏幕上，效果很好，右边的标题和左边的段落。但是在移动版式上，该段落显示在标题之前，我不希望这样，我想要标题，然后是段落。

我尝试应用push和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, 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>

在rtl方向上更改移动设备上的引导程序列

1 个答案: