html - 按列堆叠表格样式的 Div

Question

我想要 display: inline-table/display: table-row 的 div 在大屏幕上很好地排列，并在屏幕上堆叠它们的内容更小的屏幕，纯粹用 CSS 实现。以下是我尝试过的内容和解释。

或者，视觉上:

大屏幕

|---------|---------|---------|
|         |         |Longer   |
|Header 1 |Header 2 |Header   |
|---------|---------|---------|
|Content  |Content2 |Content3 |
|---------|---------|---------|

较小的屏幕(lt 750px 宽)

|-------------|
|Header 1     |
|-------------|
|Content      |
|-------------|
|Header 2     |
|-------------|
|Content2     |
|-------------|
|Longer Header|
|-------------|
|Content3     |
|-------------|

基础知识

对于一个页面，我有一个 3 列布局，其中每列都有一个标题和内容。理想的设置是所有标题都垂直排列(本质上是 verical-align: bottom)。但是，在我定义为屏幕宽度小于 750 像素的“移动设备”上，标题应该堆叠在它通常映射到列中的内容之上。

尝试 1

这就是我第一次设置它的方式，基本上:

HTML

<div id="Wrapper">
    <div class="Column">
        <div class="Header">...</div>
        <div class="Content">...</div>
    </div>

    ... (and repeat) ...
</div>

CSS

#Wrapper{
    display: inline-table;
}

#Wrapper .Column{
    display: table-row;
    width: 33%;
}

这种方法的问题是 .Header 对象，无论样式如何，如果它有多个，都不会与其他 .Header 对齐其中的一行文本。

尝试 2

为此，我只是将所有标题 div 分离到它们自己的 div 中，并将内容放入它们自己的包装器中，其中标题包装 div 位于内容上方，然后使用 display: inline 设置所有标题的样式-table 这样我就可以将 vertical-align: bottom 应用于它们中的每一个。这适用于较长的标题，但显然不会按照较小屏幕所需的顺序折叠。

注意

我更喜欢纯 CSS 解决方案，但 jQuery/Javascript 也很好，如果没有办法解决它(或者使用 CSS 的方式是非常糟糕的做法)。

Answer 1

创建 <div>就像 table 一样，造型时灵活多了 这是我的 fiddle https://jsfiddle.net/ueeL0m6j/3/

    <div id="Wrapper">
    <div class="Column">
        <div class="Header">Header 1</div>
        <div class="Content">Content</div>
    </div>
    <div class="Column">
        <div class="Header">Header 2</div>
        <div class="Content">Content</div>
    </div>
   <div class="Column">
        <div class="Header">Header 3</div>
        <div class="Content">Content</div>
    </div>

   </div>`

CSS

.Wrapper{width: 100%;}
.Column{width: 32%; float: left; text-align: center;}

@media only screen and (max-width: 750px){

    .Column{width: 32%;margin-right: 67%;}
}