Css 交替引导网格列和移动视图

我有这样的设计：

桌面或大屏幕

注*红色或绿色框的高度不同

移动或更低的屏幕

如何在Bootstrap4网格或自定义CSS网格上创建此布局类型，有什么更好的方法

---

谢谢，祝你过得愉快。

首先，如果你想建造一个像砖石一样的柱子，常规的引导网格系统不会给你想要的。相反，您必须使用JavaScript或JavaScript插件

带卡片列的布局

卡片#1-高度：20rem

卡片#2-高度：12rem

卡片#3-高度：18rem

卡片4-高度：14rem

通过少量的样式设置，移动视图设置1列，其他视图设置2列：

#example.card-columns{
列数：1；
}
@介质（最小宽度：576px）{
#示例3.card-columns{
列数：2；
}
}

您可以获得接近您想要实现的目标：

演示：

关于mobileview的几个问题 现在，移动视图出现了一个问题。由于CSS列的顺序是从上到下、从左到右，并且没有办法更改它，因此在移动视图上获得所需内容的唯一方法是复制内容并根据断点隐藏/显示它们

再次，你的第二个截图缺少一个红色的盒子，所以我不知道你想放在哪个中间。在这里，我假设您希望将两个红色框都放在那里：

...
...

然后，您可以在mobile view上获得想要实现的目标：

---

演示：

您可以使用order类：它与col类具有相同的响应变化命名。您可以使用引导网格：感谢各位更换。你能和我分享你的代码笔例子吗？或者别的什么？你应该先分享你的代码，这样我们可以给你一些建议。截图并没有显示到目前为止你做了什么好吧，Rayees AC给了你一个链接，你可以从中获得灵感。看起来你需要学习一点boostrap：（你仍然可以对CSS列使用顺序切换flex；）很好！不知何故，我认为这并不是所有浏览器都能实现的。