Question

因此，对于以下代码，在移动网站中，或者设备宽度小于768px。我还是想先显示IMG，然后再说明。我该如何首先显示img，然后在第二行显示？

我是否只能通过操纵CSS来获得这样的效果，或者我需要通过一些JS？

<div class="row">

    <div class="col-md-8 col-xs-12">
        <img src="#"/>
    </div>

    <div class="col-md-4 col-xs-12"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. </div>

</div>

<div class="row">
    <div class="col-md-4 col-xs-12"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. </div>

    <div class="col-md-8 col-xs-12">
        <img src="#"/>
    </div>
</div>

Answer 1

HTML中的第一个元素将由浏览器定位，并且仅在此之后才会定位第二个元素。这被称为定位的“流程”。 Here是一个很好的教程。

在您的示例中，我们的注意力必须始于描述，因为它是流程中的第一个。我们需要告诉描述的位置比原本要低得多（为img预留空间）。

您是否无法更新HTML，以应用某些语义类？在您的示例中，没有CSS选择器（我知道）可以正确区分这两行。如果你可以在HTML中提供更多的类，你可以试试这样的东西，但你需要提前知道你的图像大小（这里是200px）：

（编辑：此解决方案只需要提前知道图像的大小，而不是段落的大小）

body > div.row:nth-of-type(even) {
    position: relative;
    height: 200px;
}

body > div.row:nth-of-type(even) > div.col-md-4.col-xs-12 {
    position: absolute;
    bottom: 0;
    background-color: yellow;
}

body > div.row:nth-of-type(even) > div.col-md-8.col-xs-12 > img {
    position absolute;
    top: 0;
}

否则，它是适合您的JavaScript。这很有趣。

body > div.row:nth-of-type(even) {
  position: relative;
  height: 200px;
}
body > div.row:nth-of-type(even) > div.col-md-4.col-xs-12 {
  position: absolute;
  bottom: 0;
  background-color: yellow;
}
body > div.row:nth-of-type(even) > div.col-md-8.col-xs-12 > img {
  position absolute;
  top: 0;
}

<div class="row">

  <div class="col-md-8 col-xs-12">
    <img src="#" />
  </div>

  <div class="col-md-4 col-xs-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

</div>

<div class="row">
  <div class="col-md-4 col-xs-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

  <div class="col-md-8 col-xs-12">
    <img src="#" />
  </div>
</div>

Answer 2

尝试在div的顶部添加包含图像的div，其中包含描述

      <div class="row">

          <div class="col-md-8 col-xs-12">
              <img src="http://placehold.it/300x300"/>
          </div>

          <div class="col-md-4 col-xs-12"> Lorem ipsum dolor sit amet, consectetur    adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. </div>

    </div>

  <div class="row">
    <div class="col-md-8 col-xs-12">
       <img src="http://placehold.it/300x300"/>
    </div>

    <div class="col-md-4 col-xs-12"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. 
     </div>

HTML，CSS。在MOBILE站点中的第一个节点之前首先显示第二个节点

2 个答案: