使用 CSS/HTML 的响应式列布局答案

【问题标题】：Responsive column layout with CSS/HTML使用 CSS/HTML 的响应式列布局
【发布时间】：2018-02-06 15:11:44
【问题描述】：

我正在尝试使用 HTML/CSS 实现以下布局，其中导航元素“A”和“C”位于小屏幕上的主要内容“B”之上，并对应于左侧“A”和右侧分布大屏幕上的“C”。

我的目标是使用恒定的 HTML 元素，并且只根据媒体查询更改 CSS 样式。

如何做到这一点？

 Mobile                Desktop
 (small screen)        (large screen)
 +-------------------+ +-----------------------------------+
 |    A    |    C    | |    A    |       B       |    C    |
 +-------------------+ +---------+               +---------+
 |         B         |           |               |
 |                   |           |               |
 |                   |           |               |
 |                   |           |               |
 |                   |           |               |
 |                   |           |               |
 +-------------------+           +---------------+

HTML

<div>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

【问题讨论】：

“我在向您（社区）征求如何实现这一目标的建议” - 建议：请阅读How to Ask，进行适当的研究（列布局与CSS 并不是什么新鲜事物...)，然后向我们展示您迄今为止所做的尝试。
我真的不明白这个问题的反对票数量。它最初有一个很好的解释，有一个清晰的方案，需要帮助，并且只缺少一个 HTML 示例，并且是否需要它值得怀疑，因为它已经很清楚了。我在问题被赞成的地方看到过类似的情况
@Pharotek 如果您愿意，请将现在更新的问题复制到一个新问题中，通知我，我会将我的答案移至该问题，您可以将其删除，因为我认为它不会赢得了所有反对票。
@LGSon 非常感谢您的帮助！我现在要等 7 天，然后再问...
如果你发现最好的，只需删除这个并稍后重新发布。这是我的示例代码的小提琴：jsfiddle.net/dmy6ptw8

标签： html css flexbox

【解决方案1】：

在 CSS 上使用媒体查询。

@media (max-width: 600px) {
  //Display as u want the tables or divs for small devices
  //Change width as desired
}

@media (min-width: 601px) {
  //Display as u want the tables or divs for big devices or desktop
  //Change width as desired
}

【讨论】：

【解决方案2】：

仅使用 HTML 和 CSS，我们无法实现此要求。如果您在代码中使用引导程序。你可以实现。

在引导程序中，我们有响应式实用程序概念，您可以使用它来构建您的上述要求

For your reference

【讨论】：

当然这可以使用 HTML/CSS 来完成……而且既然 bootstrap 也使用了它，那么它也不应该能够做到吗？

【解决方案3】：

我认为 flexbox 在这里会有所帮助： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在容器 div 上设置显示：flex 并按照链接文章中的说明进行对齐。

【讨论】：