所以这是我在stackoverflow上的第一个问题，在最终“创建”一个帐户后，我看到了一个相当大的“相似”问题标题列表......但我几乎一直在滥用谷歌来寻找答案，并且无济于事；所以，就这样吧。
我对 html 和 css 还很陌生，但是在过去的 2 个月里，我一直积极而痴迷地以极快的速度快速获取尽可能多的知识，我觉得我正在取得很大的进步。
然而，我意识到我想用我的布局做些什么，我似乎无法实现。
我猜每个人都知道“液体”布局，以及显然非常流行的“圣杯”3 列布局。
我想使用这种类型的布局，因为在我看来，它是最美观的......但我想在语义上写我自己的，这样我就不会“复制”任何人，所以我有一个与我自己的框架的个人联系，当我查看我的标记时，不必弄清楚别人在想什么。
这是目标：
我希望我的主要内容在中间，由 2 个“侧栏”列包裹，并且我希望整个东西都是“液体”，从全分辨率一直到 320 像素宽。
但是，出于 SEO 的目的，我希望我的“主要内容”列（中间的）在 DOM 树中排在第一位，并且我希望我的侧栏：
1st）随着页面宽度流畅地收缩，然后 2nd）随着页面变得过于狭窄，我希望“主要内容”（中间）列向左“对齐”，保持在顶部，并且是 100% 宽度，而第三) 侧栏“捕捉”“在”主要内容栏“下方”，每个栏占 50% 的宽度，
这样：所有 3 列总是占据页面的整个宽度，并且当侧栏“卡入”时，它们与“中间”列的宽度相同。
像这样的东西：
|2222111111113333|
|________________|
|222111111333| <--
|____________|
|22111133| <--
|________|
*snap*(a)
|1111| <--
|2233|
|____|
|11| <--
|11|
|22|
|33|
或：快照（b）
|111111| <--
|222333|
|______|
|111| <--
|111|
|222|
|333|
|11| <--
|11|
|11|
|22|
|2_|
|33|
|3_|
看看我在说什么？
这是问题：
我已经尝试了所有我能想到或搜索的东西，尝试......似乎只有“没有办法”让 css 使“DOM：1st/middle”列保持在中间和顶部，同时还保持两个侧栏对称，并保留空间，并将所有 3 列始终保持在一个漂亮、整洁的盒子中。
我设法使中间列保持在顶部，并在 DOM 中排名第一，但这样做会给侧列带来混乱和混乱，因为 #2 必须在带有 #1 的 div 内，以便 1/mid 保持最重要的是，但是将#3 放在那个 div 中会搞砸一切。
对我来说，这个小问题非常令人沮丧，而且我已经为此苦苦挣扎了好几个星期了。（我差不多 2 个月前才开始学习 html 和 css；我一半的时间都花在了这个问题上）
如果有人确切地知道我在说什么并试图做什么，并且知道：
A）这是否可能
B）如何做到这一点
我绝对很想知道......因为我真的很想超越这个小（阅读：巨大的）问题，并继续走上我统治世界的道路。
TL;博士：
想做“|213|” 变得：
|1|
|2|
|3|
没有它变成这样：
|_1_|
|2__|
|__3|
或这个：
|_1_|
|2_3|
|___|
在最大和最小屏幕之间的任何点。
有可能做到吗？还是我应该（放弃并）调整我的布局策略并继续前进？