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

我尝试使用pull / push进行col-sx但没有成功。

我知道Bootstrap是“移动优先”，解决方案可能是首先按顺序将它们放在sx上，然后将它们推入/拉到桌面上，但出于搜索引擎优化的原因，我需要在照片之前有文本代码。

有可能吗？感谢的

Answer 1

反过来接近 - 先移动......

因此，请将照片放在文字之前，并在较大的屏幕上使用推/拉。

你不能在xs cols上使用push / pull。

顺便说一句，你需要xs NOT 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影响标题，图像，链接和段落等。

但是，要解决您的布局，您可以这样做：

＆＃13;

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

＆＃13;

Answer 3

您应该尝试flexbox。

如果.row元素中只有这两个项目，则相对简单

＆＃13;

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

＆＃13;

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

＆＃13;

引导定位col-xs与div命令绑定为seo原因

3 个答案: