新闻特殊排版js效果

HTML部分

<ul class="newsBox">
	<li>
		<div class="newPIc">
			<a href="/xinwenzixun/2017/1220/24.html" title="">
				<img src="/uploads/171220/2-1G220151522627.jpg" alt="">
			</a>
		</div>
		<div class="newText">文字部分文字部分文字部分文字部分文字部分</div>
	</li>
	<li>
		<div class="newPIc">
			<a href="/xinwenzixun/2017/1220/24.html" title="">
				<img src="/uploads/171220/2-1G220151522627.jpg" alt="">
			</a>
		</div>
		<div class="newText">文字部分文字部分文字部分文字部分文字部分</div>
	</li>
	<li>
		<div class="newPIc">
			<a href="/xinwenzixun/2017/1220/24.html" title="">
				<img src="/uploads/171220/2-1G220151522627.jpg" alt="">
			</a>
		</div>
		<div class="newText">文字部分文字部分文字部分文字部分文字部分</div>
	</li>
</ul>

3个解决方法，最终的效果都是一样；

x01 不适用 跨屏/自适应 的前端

$(".newsBox li:nth-child(2) .newText").after($(".newsBox li:nth-child(2) .newPic"));

x02 可用于自适应，跨屏 的前端

$(function(){
	$(".newsBox li:eq(1) .newPIc").before($(".newsBox li:eq(1) .newText"));
	if ($(window).width()<880) {
		$(".newsBox li:eq(1) .newText").before($(".newsBox li:eq(1) .newPIc"));
	}
})

x03 可用于自适应，跨屏 的前端

$(function(){
	if($(window).width()>880){
		$(".newsBox li:eq(1) .newPic").before($(".newsBox li:eq(1) .newText"));
	}
})