由于seo原因，使用div顺序绑定引导定位colxs

Question

我正在使用Bootstrap 3.0，我遇到了这种情况：

  <div class="row">
    <div class="col-md-8 col-xs-12">text</div>
    <div class="col-md-4 col-xs-12">photo</div>
  </div>

桌面

---------------- ---------
|   text        | photo   |
---------------- ---------

移动

  -------------------------
 |   text                 |
  -------------------------
 |   photo                |
  -------------------------

在手机上，我需要先拍照后发短信。

-------------------------
|   photo               |
-------------------------
|   text                |
-------------------------

我试着对colsx使用pull/push，但没有成功。

我知道Bootstrap是"移动优先"的，解决方案可以是先在sx上按我想要的顺序放置它们，然后将它们推/拉到桌面上的位置，但出于SEO原因，我需要在拍照前有文本代码。

有可能吗？感谢

Answer 1

用另一种方式处理它-移动优先。。。

所以，把你的照片放在文字之前，在更大的屏幕上使用推/拉。

不能对xs-cols使用推/拉。

顺便说一句，你需要xs而不是sx！：）

<div class="row">
    <div class="col-md-4 col-md-push-8 col-xs-12">photo</div>
    <div class="col-md-8 col-md-pull-4 col-xs-12">text</div>
</div>

Answer 2

我不认为这会影响SEO。SEO与div布局无关。SEO对标题、图像、链接和段落等的影响

然而，要解决您的布局，您可以这样做：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-8 col-sm-push-8 col-xs-12">text</div>
  <!--first push-->
  <div class="col-md-4 col-sm-pull-8 col-xs-12">photo</div>
  <!--then pull-->
</div>

Answer 3

您应该尝试flexbox。

如果.row元素中只有这两个项目，那么它是相对简单的

 /* Of course, use your xs max-width */
 @media screen and (max-width: 768px) {
   .class-of-this-row {
     display: flex;
     flex-direction: column-reverse;
   }
 }

<div class="row class-of-this-row">
  <div class="col-sm-8 col-xs-12">text</div>
  <div class="col-sm-4 col-xs-12">photo</div>
</div>