Css 使用Flex-box堆叠列表

我的问题是关于flex box的。我有一个基础表，我正在尝试添加flex box。这个表有4列宽，当屏幕是移动设备时，我试图成对地堆叠这些列

我一直试图弄乱代码，但我不知道在哪里添加FlexCSS输入来实现这一点

我的目标是：

桌面：

A1   B1   C1   D1
a2   b2   c2   d2
a3   b3   c3   d3

流动电话：

A1   B1
a2   b2
a3   b3
C1   D1
c2   d2
c3   d3

这是我目前的密码

<style>
  div.packages {
     font-family: Verdana, Geneva, sans-serif;
     border: 1px solid #A9A9A9;
     width: 100%;
     text-align: center;
     border-collapse: collapse;
     }
 .divTable.packages .divTableCell, .divTable.packages .divTableHead {
     border: 1px solid #A9A9A9;
     padding: 3px 2px;
     }
 .divTable.packages .divTableBody .divTableCell {
    font-size: 14px;
    color: #656565;
    }
 .divTable.packages .divTableRow:nth-child(even) {
    background: #EFEFEF;
    }
 .divTable.packages .divTableHeading {
    }
 .divTable.packages .divTableHeading .divTableHead {
    font-size: 22px;
    font-weight: bold;
    color: #FF8700;
    text-align: center;
    }
  .packages .tableFootStyle {
    font-size: 13px;
    }
  .packages .tableFootStyle .links {
    text-align: right;
    }
  .packages .tableFootStyle .links a{
    display: inline-block;
    background: #FFFFFF;
    color: #A40808;
    padding: 2px 8px;
    border-radius: 5px;
    }
 .packages.outerTableFooter {
    border-top: none;
    }
 .packages.outerTableFooter .tableFootStyle {
    padding: 3px 5px; 
    }
/* DivTable.com */
 .divTable{ display: table; }
 .divTableRow { display: table-row; }
 .divTableHeading { display: table-header-group;}
 .divTableCell, .divTableHead { display: table-cell;}
 .divTableHeading { display: table-header-group;}
 .divTableFoot { display: table-footer-group;}
 .divTableBody { display: table-row-group;}
 </style>



 <div class="divTableHeading">
 <div class="divTableRow">
 <div class="divTableHead">head1</div>
 <div class="divTableHead">head2</div>
 <div class="divTableHead">head3</div>
 <div class="divTableHead">head4</div>
 </div>
 </div>
 <div class="divTableBody">
 <div class="divTableRow">
 <div class="divTableCell">cell1_1</div><div class="divTableCell">cell2_1</div><div class="divTableCell">cell3_1</div><div class="divTableCell">cell4_1</div></div>
 <div class="divTableRow">
 <div class="divTableCell">cell1_2</div><div class="divTableCell">cell2_2</div><div class="divTableCell">cell3_2</div><div class="divTableCell">cell4_2</div></div>
 <div class="divTableRow">
 <div class="divTableCell">cell1_3</div><div class="divTableCell">cell2_3</div><div class="divTableCell">cell3_3</div><div class="divTableCell">cell4_3</div></div>
 <div class="divTableRow">
 <div class="divTableCell">cell1_4</div><div class="divTableCell">cell2_4</div><div class="divTableCell">cell3_4</div><div class="divTableCell">cell4_4</div></div>
 <div class="divTableRow">
 <div class="divTableCell">cell1_5</div><div class="divTableCell">cell2_5</div><div class="divTableCell">cell3_5</div><div class="divTableCell">cell4_5</div></div>
 </div>

分区包{
字体系列：Verdana，日内瓦，无衬线；
边框：1px实心#A9A9；
宽度：100%；
文本对齐：居中；
边界塌陷：塌陷；
}
.divTable.packages.divTableCell.divTable.packages.divTableHead{
边框：1px实心#A9A9；
填充物：3px2px；
}
.divTable.packages.divTableBody.divTableCell{
字体大小：14px；
颜色：#6565；
}
.divTable.packages.divTableRow:n子级（偶数）{
背景：#efef；
}
.divTable.packages.divTable标题{
}
.divTable.packages.divTableHeading.divTableHead{
字体大小：22px；
字体大小：粗体；
颜色：#FF8700；
文本对齐：居中；
}
.套装.桌脚款式{
字体大小：13px；
}
.packages.tableFootStyle.links{
文本对齐：右对齐；
}
.packages.tableFootStyle.links链接a{
显示：内联块；
背景：#FFFFFF；
颜色：#A40808；
填充：2px8px；
边界半径：5px；
}
.packages.outerTableFooter{
边界顶部：无；
}
.packages.outerTableFooter.tableFootStyle{
填充物：3px 5px；
}
/*DivTable.com*/
.divTable{display:table；}
.divTableRow{显示：表行；}
.divTableHeading{显示：表格标题组；}
.divTableCell、.divTableHead{display:表格单元格；}
.divTableHeading{显示：表格标题组；}
.divTableFoot{显示：表页脚组；}
.divTableBody{显示：表行组；}
标题1
标题2
总目3
总目4
第1单元第2单元第3单元第4单元第1单元
第1单元第2单元第3单元第4单元第2单元
第1单元第2单元第3单元第4单元第3单元
第1单元第2单元第4单元第3单元第4单元第4单元
单元1\u 5单元2\u 5单元3\u 5单元4\u 5

即使您可以通过

表

属性实现该行为，它也不必要地复杂。使用

flexbox+list items

是一种更简单、更有效的方法

您可以为每个列创建一个列表，并将它们分组到flex容器中，以实现所需的行为。您可以通过

媒体查询

根据屏幕大小更改元素的属性。我在下面为你做了一个演示。当屏幕尺寸小于600px时，柱容器不再具有弹性，因此它们会包裹。调整浏览器大小以查看其变化情况

#容器{
显示器：flex；
}
#第1-2列{
显示器：flex；
}
#第3-4栏{
显示器：flex；
}
.ul列{
列表样式：无；
页边距底部：0；
}
@仅介质屏幕和（最大宽度：600px）{
#第3-4栏#第1-2栏{
显示：块；
}
}

A
B
C
D


A
B
C
D


A
B
C
D


A
B
C
D

即使您可以通过

表

属性实现该行为，它也不必要地复杂。使用

flexbox+list items

是一种更简单、更有效的方法

您可以为每个列创建一个列表，并将它们分组到flex容器中，以实现所需的行为。您可以通过

媒体查询

根据屏幕大小更改元素的属性。我在下面为你做了一个演示。当屏幕尺寸小于600px时，柱容器不再具有弹性，因此它们会包裹。调整浏览器大小以查看其变化情况

#容器{
显示器：flex；
}
#第1-2列{
显示器：flex；
}
#第3-4栏{
显示器：flex；
}
.ul列{
列表样式：无；
页边距底部：0；
}
@仅介质屏幕和（最大宽度：600px）{
#第3-4栏#第1-2栏{
显示：块；
}
}

A
B
C
D


A
B
C
D


A
B
C
D


A
B
C
D

谢谢，这正是我想要的。设置flex box的基线。非常感谢！谢谢，这正是我想要的。设置flex box的基线。非常感谢！