flexbox 行内的 Flexbox 列，但仅适用于平板电脑版本答案

【问题标题】：Flexbox column inside flexbox row, but only for tablet versionflexbox 行内的 Flexbox 列，但仅适用于平板电脑版本
【发布时间】：2022-02-11 00:44:24
【问题描述】：

我正在构建一个包含 3 种设计的网站，具体取决于屏幕宽度。我的 html/php 文件包含以下顺序的内容（与图片相关）：B、A、C。 Link to responsive layout blocks picture

电话：这与电话版本所需的顺序相同，因此该版本很容易解决。

桌面：我使用一个 div 来包裹所有 3 个部分；使用display: flex 结合order 属性，我能够生成桌面版本，因此也很容易解决。

平板电脑：但很遗憾，我无法让平板电脑版本正常工作。当我在 A 和 C 周围包裹一个 div 时，很容易获得所需的平板电脑布局，但是对于桌面版本，不再可能将 B 放在它们之间（即使桌面的 CSS 媒体查询没有提到特定的 div )。

我的问题：是否可以在 flexbox 行内放置一个 flexbox 列，但仅适用于平板电脑版本？我用flex-direction 和align-items 属性尝试了几件事，但不幸的是没有成功。也许不可能？

非常感谢任何建议！

【问题讨论】：

【解决方案1】：

您可以使用纯 js 检测从手机或平板电脑访问网站的时间：

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    //Do stuff
}

或使用第三方库（例如wurfl.io）仅检测平板电脑用户：

if (WURFL.is_mobile === true && WURFL.form_factor === "Tablet") {
    //Do stuff
}

【讨论】：