Zweite Spalte oben auf Handy Liquid

Question

Auf großen Bildschirmen möchte ich | A | haben | B |, auf dem Handy möchte ich
| B |
| A |
Ich sah here, dass dies über Bootstrap möglich ist. Ich benutze jedoch die Flüssigkeit von shopify. Ich sah in der theme.scss, dass es -push Klassen - versucht, die folgenden

<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> 

jedoch die medium-up--push-one-quarter mit scheint keinen Unterschied zu machen (ich auf diese CSS Grid Magie bin neu). Ich habe nichts über pull in der theme.scss (die in der Bootstrap-Lösung aus dem obigen Link verwendet wird) gesehen. Ist das was ich erreichen will und wenn ja, wie? mit Flexbox und Regel order:1; für Block B
Thanks :)

Answer 1

Sie aktuelle Markup und auf mobilen halten können nur Reihenfolge der Blöcke ändern, vergessen Sie nicht display: flex; für den Behälter dieser 2 Blocks