某些列在移动设备上的网格 div 定位不同[重复]

Posted 2023-03-05

【中文标题】某些列在移动设备上的网格 div 定位不同[重复]

【英文标题】：grid div positioning differently on mobile for some columns [duplicate]

【发布时间】：2017-05-28 14:46:49

【问题描述】：

我需要制作一个在移动设备上与在网络上具有不同结构的页面。 网页版总是这样颠倒：

文字网络

网页文字

文字网络

网页文字

手机版是这样的：

文字

网络

文字

网络

我目前的结构适合我的网络需求，并且如下：

<div class="row text-left">
  <div class="col-md-6 col-xs-12">
    Mytext
  </div>
  <div class="col-md-6 col-xs-12">
    <%= video_tag('hiw_r_1.webm', autoplay: true, loop: true) %>
  </div>
</div>
<div class="row text-right">
  <div class="col-md-6 col-xs-12">
    <%= video_tag('hiw_r_2.webm', autoplay: true, loop: true) %>
  </div>
  <div class="col-md-6 col-xs-12">
    Mytext
  </div>
</div>
<div class="row text-left">
  <div class="col-md-6 col-xs-12">
    text
  </div>
  <div class="col-md-6 col-xs-12">
    <%= video_tag('hiw_r_3.webm', autoplay: true, loop: true) %>
  </div>
</div>

但这产生的结果是

文字

网络

网络

文字

文字

网络

现在，我知道我可以“破解”来完成这项工作，只需添加为移动设备隐藏的列，其中包括每次文本排在第二位时的 webm，然后在移动设备上隐藏第一个 webm。不过，这意味着页面必须加载几乎是所有视频加载量的两倍，这是不可取的。

是否有另一种方法可以通过操纵结构而不是添加额外的 webms 并根据媒体查询隐藏和显示来实现这一点？

提前谢谢你。

【问题讨论】：

通过正确使用类命名，您可以应用一些可以轻松反转行中列的方向的弹性盒规则

getbootstrap.com/css/#grid-column-ordering

【参考方案1】：

感谢 cmets 中的@lalji Tadhani，我能够弄清楚如何解决此问题。

我认为的主要问题不是首先考虑移动设备。

您可以明显地拉和推 lg 列。一旦我知道这一点，解决方案就很容易了。

我添加的 lg 屏幕上的每个反向列

col-lg-6 col-lg-push-6 col-xs-12

那一行的第二列是

col-lg-6 col-lg-pull-6 col-xs-12

结构在 XS 上是正确的，然后我推拉柱子以获得更大的屏幕。