0

On large screens I want to have |A| |B|, on mobile I want
|B|
|A|
I saw here that this is possible via Bootstrap. However I use shopify's liquid. I saw in the theme.scss that there are -push classes - tried the following 

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

However having the medium-up--push-one-quarter doesn't seem to make any difference (I am new to these css grid magic). I didn't see anything about pull in the theme.scss (which is used in the bootstrap solution from the link above). Is what I want achievable and if yes, how?
Thanks :)

Georgi Tenev
  • 338
  • 4
  • 18

1 Answers1

0

You can keep current markup and on mobile just change order of blocks using flexbox and rule order:1; for block B, don't forget display: flex; for the container of this 2 blocks

Hovhannes Sargsyan
  • 1,063
  • 14
  • 25