Html Css-将文本环绕图像，然后在断点处重新定位

我有点棘手的问题

我正在创作一篇文章，文章的左边是正文，右边是图片。文本环绕图像。然后在断点上，我需要主体副本位于图像上方

当我使用此代码时：

<section class="news-article-body">
    <img src="img/news-article-image.jpg" alt="" title=""/>
    <p> 
      Lorem Ipsum...
    </p>
</section

看起来很棒。图像向右浮动，文本在需要时环绕。 但是因为图像标签在副本之前，我无法在断点处获得副本下方的图像

因此，基本上我需要用这个html（或其他解决方案）包装文本：

乱数假文。。。

您可以使用display:flex和order:

在断点处，它将来自您的HTML片段：

.news-article-body {
display:flex;
flex-direction:column;
}
.news-article-body img {
order:2;
}


Javascript和浮点清除也有帮助：或

代码示例：

onload=function() {
  document.getElementById('myImg').style.position='absolute';// take img out of the flow
  var myoffsetHeight = document.getElementById('myP').offsetHeight;//return height of <p>
  document.getElementById('myT').style.height=myoffsetHeight +'px'; //set height to floatting element
  document.getElementById('myImg').style.position='static';//bring img back in the flow
}

onload=function（）{
document.getElementById（'myImg'）.style.position='absolute'；//将img从流中取出
var myoffsetHeight=document.getElementById（'myP'）.offsetHeight；//返回高度
document.getElementById（'myT'）.style.height=myoffsetHeight+'px'；//将高度设置为浮动元素
document.getElementById（'myImg'）.style.position='static'；//将img带回流中
}

从这样的结构中：

<section >
  <b id="myT"></b>
  <img src="http://lorempixel.com/250/100/" id="myImg"/>
<p id="myP">Pellentesque ....</p>
</section>


佩伦茨克



在这两个示例中，不要忘记设置断点，只需在文章文本的开头插入一个标记，并使用
align=“right”
使文本环绕即可。
好的解决方案。但是我需要它来为IE9和更高版本工作，我不认为flex或order是受支持的。Does有一个已知的高度吗？每次都会有不同数量的文本。虽然可能有多个tagsokay，但想法是，，，然后您可能需要使用javascript检索段落的高度，并将其应用于图像将清除的浮动伪元素from@DustinSilkflex+javaScript作为后备：已经使用float将其包装。在响应断点处，我需要文本定位在图像上方。这就是问题所在。您是否喜欢使用jQuery？我希望有一个纯CSS解决方案。GCyrillus（如下）有一个很好的解决方案，但IE9不支持它，有几种方法可以通过javascipt实现。我将引用他的文章：codepen.io/anon/pen/ecKlk。工作完美。在jQuery上使用更多的css，并且不重新排列DOM。
onload=function() {
  document.getElementById('myImg').style.position='absolute';// take img out of the flow
  var myoffsetHeight = document.getElementById('myP').offsetHeight;//return height of <p>
  document.getElementById('myT').style.height=myoffsetHeight +'px'; //set height to floatting element
  document.getElementById('myImg').style.position='static';//bring img back in the flow
}

<section >
  <b id="myT"></b>
  <img src="http://lorempixel.com/250/100/" id="myImg"/>
<p id="myP">Pellentesque ....</p>
</section>