반응형 숙제 좀더 깔쌈하게 하는 법 없을까요?

[leesw]

<div class="flex-container">
        <div class="row-1">
            <div class="flex-item">
                <h4>Fast Shipping</h4>
                <p>lorem ipsum</p>
            </div>
            <div class="flex-item">
                <h4>Good Service</h4>
                <p>lorem ipsum</p>
            </div>
        </div>

        <div class="row-2">
            <div class="flex-item">
                <h4>Free Coupons</h4>
                <p>lorem ipsum</p>
            </div>
            <div class="flex-item">
                <h4>New products</h4>
                <p>lorem ipsum</p>
            </div>
        </div>
    </div>

.flex-container {
    text-align: center;
    display: flex;
}

.flex-container div {
    margin: 40px;
}

/* 1200px 이상부터 다음을 추가해주세요 */
@media screen and (min-width : 1200px) {
    .row-1, .row-2 {
        display: flex;
    }
    .row-1 div:nth-child(2) {
        margin-right: 0;
    }
    .row-2 div:nth-child(1) {
        margin-left: 0;
    }
}

/* 768px 이하부터 다음을 추가해주세요 */
@media screen and (max-width : 768px) {
    .flex-container {
        display: block;
    }
}

다음처럼 flex를 사용해 제대로 작동하는 것 같긴한데 뭔가 flex를 그저 가로로 배치하는 기능으로만 사용하는
하드코딩한 것처럼 느껴져서 찝찝합니다.
flex-wrap처럼 내용이 채워지면 줄을 넘겨서 배치해주는 기능 사용하면 될삘이긴 한데 아무리 고민해봐도 제 짧은 식견으로는 
구현이 잘 안됩니다..
또 개인적으로 row-1 row-2 클래스를 추가하는게 좀 맘에 들진않았습니다. flex-container와 내부의 flex-item 4개만으로 해당 반응형을 
구현해보고 싶었는데 태블릿 사이즈에서 둘씩 묶으려면 어쩔 수 없이 row 클래스로 두개씩 div로 묶어줘야했습니다..

[codingapple]

그래도 상관없습니다 
복잡해보이면 그냥 flex-wrap 쓰면 됩니다

[leesw]

알고리즘 공부할때는 가장 깔끔하고 단순한 답을 내기 위해 고민 많이하고 그랬는데
HTML/CSS 공부하면서 비슷한 방식으로 고민하면 오히려 손해인 듯한 느낌받습니다.
리액트나 next같은 라이브러리, 프레임워크 쓰는게 아니라 html/css 수준에서는 그냥 구현만 되면 장땡이라는 마인드셋이 나을까요?

[codingapple]

html css는 디자인의 영역이라 구현잘했으면 이 코드가 나중에 관리 수정이 편할지 까지만 생각해보면 됩니다
프레임워크써도 html css는 똑같이 사용합니다

[leesw]

아하 감사합니다.

[글쓴이]

글