Question

我需要制作一个在移动设备上具有与在网络上不同的结构的页面。网络版本总是如此反转：

text webm

webm text

text webm

webm text

移动版本是这样的：

文本

WEBM

文本

WEBM

我目前的结构符合我对网络的需求，并且正在关注：

<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

文字

文字

WEBM

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

是否有另一种方法可以通过操纵结构而不是添加额外的网页并基于媒体查询隐藏和显示来实现这一目标？

提前谢谢。

Answer 1

感谢@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上是正确的，然后我推动并拉动了用于放大屏幕的cols。

对于某些列，grid div在移动设备上的定位不同

1 个答案: