モバイル上の2番目の列Liquid

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グリッド魔法に新しいです試してみました）。私はpullについてはtheme.scssには何も見ませんでした（上記のリンクからブートストラップソリューションで使用されています）。 私は達成したいと思いますか？はいの場合、どうですか？
感謝:)

Answer 1

あなたは現在のマークアップを維持し、モバイルでちょうどフレキシボックスを使用してブロックの順序を変更し、この2つのブロックのコンテナのdisplay: flex;を忘れないでください、ブロックBのためにorder:1;支配することができます