你好，这个需要使用媒体查询来实现。
.gridContainer {
margin-left: auto
margin-right: auto
width: 86.45%
}
.img { width:50%}
@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%
padding-left: 1.1625%
padding-right: 1.1625%
}
.img { width:60%}
}
@media only screen and (min-width: 769px) {
gridContainer {
width: 88.5%
max-width: 1232px
}
.img { width:80%}
}
<style>.main{ width:1000pxheight:600pxbackground:#0CF}
.main img{ vertical-align:middlefloat:leftwidth:640pxheight:320px}
</style>
<div class="main">
<img src="图片地址" />
<span>文字区域</span>
以上方式已经按照你所说的，左边是图片，右边是文字，文字自动换行，并且环绕图片实现效果；
主要标签有：vertical-align:middle使其让图片与文字对齐，float:left设置一个图片的靠左对齐方式；
你可以测试一下效果，希望对你有所帮助
