[html] 신문기사 형태 레이아웃 (PC에서 2단, mobile 1단)

PC에서는 좌우로 나뉘는 2단 레이아웃이었다가 모바일에서 1단 레이아웃으로 바뀌는 구조

 

HTML

<div class="article-box cf">
    <div class="text-box left-box">
        <h3>title</h3>
        <h4>sub title</h4>
        <p>
			text area 1
        </p>
    </div>
    <div class="text-box right-box">
        <div class="img-box">
            <img src="img-article.png" alt="">
        </div>
        <p>
            text area 2
        </p>
    </div>
</div>

 

 

CSS

.left-box, .right-box{width: 50%;padding: 0 3%;}
.left-box{float: left;}
.right-box{float: right;}
.img-box{width: 100%;height: 300px;margin-bottom: 30px;}

@media screen and (max-width: 768px){
	.left-box, .right-box{float: none;width: 100%;padding: 0;}
    .right-box{padding-top: 20px;}
}

 

jQuery

$(document).ready(function(){
	if(wWidth < 769) {
        	$('.img-box').prependTo($('.tit-box'));
    	}else {
        	$('.img-box').prependTo($('h3'));
   	}
})