float 를 사용하여 정렬할때 발생하는 현상입니다.

정상적으로 줄 바꿈이 되려면 줄바꿈이 되는 위치에서 clear 가 되어야 합니다. 

 

-> mobile.css 를 다음과 같이 수정하였습니다. (파란줄 추가)

 

 

 

   /* 프리미엄 식품 */
    .main_section4 {
        padding:10px 0;
        .title {
            display:block; padding:0 0 10px 0; color:#363636; font-weight:bold;
            border-bottom:1px solid #d7d7d7;
        }
        .box {
            padding:10px 0;
            .title_img { display:none; }
            ul {
                @extend %ul;
                @extend %clear;
                li {
                    float:left; width:31%; padding:1%;
                    .img {
                        img { width:100%; height:auto; }
                    }
                    .info {
                        span {
                            font-size:.9em;
                            &.subject {
                                display:block; padding:10px 0;
                                a { color:#363636; font-weight:bold; }
                            }
                            &.sijung { color:#8d8d8d; }
                            &.price { color:#f34b1e; }
                        }
                    }
                    &.no_data { color:#363636; font-size:.9em; }
                    &.li_2, &.li_3, &.li_4 { display:block; }
                    &.li_3, &.li_6, &.li_9 { clear:both; }
                }
            }
        }
    }