html - Susy列-移动堆叠

好吧，我是Susy的新手，我正在尝试做一些可能非常简单的事情。在大型显示器上，我有两列并排| A | B |。当我将浏览器缩小到移动大小时，它会将A列叠加在B列上。

我如何使B堆叠在A之上？我到处看了看，似乎找不到布局的母版。我可以整天阅读文档，但是，我是一个有视觉感的人。有什么地方可以下载一些示例Susy网格以弄乱要学习的设置？

我意识到这是一个非常新手的职位，但是，我必须从某个地方开始。

谢谢！

最佳答案

最简单的选择是更改HTML中元素的源顺序：

<div class="b">column B</div>
<div class="a">column A</div>

如果b在标记中排在首位，它将自动在浏览器顶部堆叠。您仍然可以使用Susy将它们按任一顺序水平排列：

.a {
  @include span(8 of 12);
}

.b {
  @include span(last 4 of 12);
}

我不知道您的布局，所以我只是在这里补号。 last关键字会将b推到右侧，因此a可以在左侧填充。

您的另一个选择涉及CSS flexbox：

Flexbox允许您以垂直或水平的任何顺序堆叠元素。如果您想朝这个方向前进，则应该阅读类似CSS Tricks tutorial的内容。 Susy和flexbox可以很好地协同工作，但是您必须使用susy函数而不是mixins。您可以在flexbox需要宽度的任何地方应用Susy函数，例如：

.b {
  flex-basis: span(4 of 12);
}

关于html - Susy列-移动堆叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36122852/