如何以响应方式处理数据列？答案

【问题标题】：How to handle columns of data in a responsive manner?如何以响应方式处理数据列？
【发布时间】：2014-12-19 06:32:44
【问题描述】：

我的页面有 2 列垂直向下显示的新闻文章。请注意，两列的样式不同。例如。 A 列的宽度与 B 列的宽度不同。

A1 B1
A2 B2
A3 B3
|  | 
An Bn

两列都是 div。我已经对网站进行了响应式编码，因此当您将浏览器窗口调整为小宽度时，整个 B 列都会移动到 A 列下方。

A1
A2
A3
| 
An
B1
B2
B3
|
Bn

到目前为止，从 2 列到折叠的 1 列的整个转移看起来不错。但是，就用户希望看到的内容而言，它并不是很实用。 B 列顶部的一些文章比 A 底部的文章更重要。我更可能想展示如下内容：

A1
B1
A2
B2
A3
B3
|
An
Bn

完成此任务的最佳方法是什么？我几乎觉得我必须根据屏幕宽度操作 DOM 以将文章放置在正确的位置，但我不想这样做。

我的 HTML 摘录：

<div id="body" class="clearfix">
    <div id="primaryArticleBlock">
        <div id="article1"></div>
        <div id="article2"></div> 
        <div id="article3"></div>                      
    </div>
    <div id="secondaryArticleBlock">
        <div id="article4"></div>
        <div id="article5"></div>
        <div id="article6"></div>            
    </div>
</div>

【问题讨论】：

HTML 结构在这里很重要。
我建议使用网格系统（参见 getbootstrap.com 或 Foundation.zurb.com）
像@sventschui 建议的网格系统可能是最好的。看看这个layoutit.com/build?r=43964896

标签： html css responsive-design collapse

【解决方案1】：

这是处理它的一种方法，与其他人的网格建议松散相关：http://codepen.io/panchroma/pen/OMOmZY

一般的想法是你重构你的内容，让 An 和 Bn 一起在同一行，然后使用媒体查询来操作这些行元素，并在视口变窄时将它们设置为全宽。

您还需要在每一行上使用clearfix，以便正确清除所有元素

HTML

...  
<div class="row cf">
    <div class="left">article1</div>
    <div class="right">article4</div>
</div>
...

CSS

.left{
  width: 60%;
  float:left;
}
.right{
  width:30%;
  float:left;
}


@media (max-width: 767px) {
  .right{
    width:100%;
  }

  .left{
    width:100%;
  }
}

祝你好运！

【讨论】：