Html CSS：更改浮动列结构布局？

我有三列，其中一列是50%宽，另外两列是25%宽的边栏

HTML

<article></article>
<aside id="s1"></aside>
<aside id="s2"></aside>

<aside id="s1"></aside>
<article></article>
<aside id="s2"></aside>

维护HTML结构，是否可以以某种方式浮动它们以实现不同的布局-我希望在文章的左侧有

#s1

，在文章的右侧有

#s2

---

这在CSS3中是可能的吗？这里是一段代码

如果不更改页面的结构，就无法做到这一点-CSS并不意味着用于结构化目的。它完全违背了语义标记的原则

---

您可以轻松地重新构造页面，就像在本例中使用HTML更改结构一样。或者，@sandeep似乎有一个很好的答案。

您可以使用

display:table

。这样写：

article {
    background:#f0f0f0;
    width:50%;
    display:table-cell;
}

aside {
    width:25%;
    display:table-cell;
}

HTML

<article></article>
<aside id="s1"></aside>
<aside id="s2"></aside>

<aside id="s1"></aside>
<article></article>
<aside id="s2"></aside>

---

您希望S1位于文章的左侧，因此，请将其放在第一位

<aside id="s1"></aside>



然后文章

<article></article>



然后，在右边-你想要“s2”-所以，把它放在最后

<aside id="s2"></aside>



虽然对Css进行一些更改会很好，但它可以在不更改Css的情况下工作。
使用Css的两列表结构示例

#content {

  -webkit-column-count: 2;
  -webkit-column-rule: 1px solid #bbb;
  -webkit-column-gap: 2em;

  -moz-column-count: 2;
  -moz-column-rule: 1px solid #bbb;
  -moz-column-gap: 2em;

  column-count: 2;
  column-rule: 1px solid #bbb;
  column-gap: 2em;


  display: block;
}​

这是一个现场演示

那么在html布局中，文章布局应该在2个副词之前？正如已经给出的答案所显示的那样，如果第一个旁白先出现，那么设置旁白的格式是非常容易的。保持顺序仅仅是为了可读性还是因为模板？你的HTML应该尽可能真实地反映你页面的结构：
然后
最后
我知道它应该反映它，我知道它又回到了语义。然而，在我的例子中，我正在构建一个响应性的Web设计，在移动版本上，结构应该是这样的。这两个边栏在文章下面是有道理的。然而，在桌面设备和更宽的屏幕上，第一个侧边栏浮动在文章的左侧在语义上也更有意义…这就是为什么我要问的！…这就是我不想更改标记的原因。现在的标记是语义的-只是在更宽的视口中，以不同的方式浮动它更有意义。如果我更改html的顺序，为什么要使用
display:table
。我可以简单地按照我想要的方式浮动它。我不想更改标记本身。查看我对这个问题的评论，了解我不想更改标记的原因。好的，如果不可能，这就是正确答案。要理解我为什么要这样做，请阅读我对问题本身的评论。它与一个响应性强的布局有关，在这个布局中，以不同的方式浮动它是非常有意义的。然而，如果不可能，那就不可能！不，对不起！您始终可以使用@media CSS media querys隐藏元素并在调整页面大小时重新构造页面。。。