移动液体上的第二列

Question

在大屏幕上我想要| A | | B |，在手机上我想要 |的乙 |
| A |
我看到here这可以通过Bootstrap实现。但是我使用shopify的液体。我在theme.scss中看到有-push类 - 试过以下内容   

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

然而让medium-up--push-one-quarter似乎没有任何区别（我对这些css网格魔法不熟悉）。我在theme.scss中没有看到pull的任何内容（在上面链接的bootstrap解决方案中使用）。 我想要什么才能实现，如果是，怎么样？ 谢谢:)）

Answer 1

您可以保持当前标记，在移动设备上只使用flexbox更改块的顺序，并为块B更改规则order:1;，不要忘记{2}的容器中的display: flex;