html - 基于屏幕尺寸的木材 Shopify 主题推/拉列

Question

一直停留在这个使用 Timber CSS 框架的 shopify html 模板上。 https://github.com/Shopify/Timber/blob/master/assets/timber.scss.liquid

我需要用类交换两个div

grid__item

如果用户使用的是移动设备。

下面是我的代码。我不知道如何进行交换。我相信 bootstrap 将此称为推/拉？

<div class="grid">
  <div class="grid__item one-half medium-down--one-whole">1</div>
  <div class="grid__item one-half medium-down--one-whole">2</div>
</div>

在移动设备中，我希望首先显示带有“2”的 div，然后显示“1”。

Answer 1

木材有推和拉的选项

https://github.com/Shopify/Timber/blob/master/assets/timber.scss.liquid#L38

因此，要在移动设备上实现顺序更改，您应该在桌面标记中将元素颠倒过来进行 push 和 pull，或者使用 flexbox 在 .主题的 scss 文件