响应式网格 - 使用不断变化的宽度/高度进行真实/水平堆叠

Question

我希望在横向和potrait模式下制作一个适合移动设备大小的响应式网格。

所以我在div / grid中有以下组件：

1. 图片
2. A Div谈论它的描述。
3. 购买按钮。
4. 分享按钮。

因此在potrait模式下，它们都具有相同的宽度并垂直堆叠，而在横向模式下，所有这些都具有高度并且水平堆叠。例如：

在风景中



在Potrait



我对css并不精通，过去两天一直试图这样做。任何帮助都将深表感谢。

Answer 1

有一个媒体查询来检查设备的方向：

@media all and (orientation: portrait) { ... }

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#orientation

只有在设备处于纵向模式时，您才可以使用此规则将CSS规则应用于元素：

@media all and (orientation: portrait) { 
  .column {
    width: 100%;
  }
}

像这样的东西