[英]Susy Next content Mobile to Desktop layout order
I'm having a few issues understanding how to produce the following layout using Susy Next. 我在理解如何使用Susy Next生成以下布局时遇到一些问题。
I can't seem to get my head around doing this cleanly in Susy, or at all really. 我似乎无法全力以赴地在Susy中做到这一点,或者根本没有做到。
The source order is the following and may not be changed. 源顺序如下,并且不能更改。
<div class="item a">A</div>
<div class="item b">B</div>
<div class="item c">C</div>
<div class="item d">D</div>
The required layout is on Mobile is like this: 在Mobile上所需的布局是这样的:
---------
| B |
|-------|
| A |
|-------|
| C |
|-------|
| D |
---------
The required layout is on Desktop is like this: 在桌面上所需的布局是这样的:
------------------
| A | B |
|-------|-------|
| D | C |
-----------------
I think this should be easy with Susy but the documentation doesn't help that much. 我认为Susy应该很容易,但是文档并没有太大帮助。
Thx in advacend for the Help 感谢您的帮助
Susy Next is basically a calculator for grid-widths. Susy Next基本上是网格宽度的计算器。 When you want to reorder elements horizontally, that can be helpful - but vertical reordering is much more difficult.
当您想对元素进行水平重新排序时,这可能会有所帮助-但垂直重新排序要困难得多。 Susy can help with the second layout, but can't do much about the first.
Susy可以为第二种布局提供帮助,但是对于第一种布局并不能做很多事情。
Flexbox can handle both situations, though, using the order
property: 但是,Flexbox可以使用
order
属性处理两种情况:
.container {
align-items: stretch;
display: flex;
flex-direction: row-reverse; // flow right-to-left
flex-wrap: wrap; // wrap top-to-bottom
}
.item {
flex: 1 1 $preferred-width;
}
.b {
order: 1;
}
.a {
order: 2;
}
.c {
order: 3;
}
.d {
order: 4;
}
There would be other ways to achieve the different layouts using Flexbox or CSS Grid and media-queries. 还有其他方法可以使用Flexbox或CSS Grid和媒体查询来实现不同的布局。 This seemed like the simplest option to me.
对我来说,这似乎是最简单的选择。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.