모바일 위에 액체의 두 번째 열

Question

큰 화면에서 | A | | B |, 모바일에 내가 원하는
| B |
| A |
here은 부트 스트랩을 통해 가능하다는 것을 알았습니다. 그러나 나는 shopify의 액체를 사용합니다. 나는 -push 클래스가 있다는 theme.scss에서 본 - (가) 그러나 어떤 변화를하지 않는 것 medium-up--push-one-quarter을 가진

<div class="grid__item medium-up--one-half section-header__item"> 
    <h1 class="section-header__title"> 
    {{ collection.title }} 
    </h1> 
    <div class="section-header__subtext rte"> 
     {{ collection.description }} 
    </div> 
</div> 

<div class="section-header text-center medium-up--push-one-quarter"> 

    <img src="{{collection.image | img_url: '235x235' }}"> 

</div> 

다음 (나는이 CSS를 그리드 마법에 새로운 오전 노력). theme.scss에 위의 링크에서 부트 스트랩 솔루션에 사용 된 pull에 대해서는 아무 것도 보지 못했습니다. 내가 원하는 것은 달성 가능한 것이며, 그렇다면 어떻게 될까요?
감사합니다 :)

Answer 1

당신은 현재의 마크 업을 유지하고 모바일 단지 인 flexbox를 사용하여 블록의 순서를 변경하고,이 2 개 블록의 컨테이너 display: flex;를 잊지 마세요, 블록 B에 대한 order:1; 배제 할 수