Twitter bootstrap 如何仅使用css对齐不同容器中的内容

我正在尝试建立一个类似于下图的

定价表


以下是我的要求


开始
按钮应位于同一水平面上
无论容器的内容如何，容器的高度都必须相同（两个容器中的点数和描述长度可能会有所不同，如图所示）
这两个容器应在低屏幕宽度上一个叠在另一个上面

下面是我当前使用JS的解决方案的一个小片段

findTallest=函数（）{
var tallestByGroupNum={}
$（“.item contents”）。每个(
函数（）{
var grpNum=$（this.parent（）.attr（'data-group-num'）；
//！<而不是>，以支持未定义的值
如果（！（$（this）.height（）
/*将您的css放在这里*/
.物品箱{
边框：1px纯红；
}
普里辛卡德先生{
边框：2倍纯红；
文本对齐：居中；
}

自由的
长长长长长长长长长长长长的描述
开始
指向
指向
指向
开始
保险费
简短描述
开始
指向
指向
指向
指向
指向
指向
开始
在使用引导的纯css中，实现这一点的唯一方法是使用这些元素的两种不同布局。其中一个是当前的html，用于较小的屏幕尺寸，另一个是布局，其中两个顶部div位于
行
，两个底部div位于
行
。这将允许行保持相同的高度。然后使用媒体查询或隐藏类，例如
隐藏md
相关html。它不是很好，因为它需要重复代码，但它是一个纯css解决方案

这里可以找到我放在一起的一个例子——它需要大量的样式设计工作，但是您可以看到，仅仅使用引导类，不同的元素是如何以不同的宽度显示的

我还必须使用flex box来对齐项目垂直拉伸和
flexbox
，我会这样做：


*{
框大小：边框框；
}
.定价{
背景：#eee；
显示器：flex；
弯曲方向：立柱；
填充：2em 0；
}
@介质（最小宽度：48em）{
.定价{
弯曲方向：行；
柔性包装：包装；
}
}
.定价.区块{
显示器：flex；
证明内容：中心；
弹性：150%；
}
@介质（最大宽度：48em）{
.定价.区块{
弹性：1；
}
.定价.块：第n个子项（奇数）{
顺序：-1；
}
.定价.块：第n个子（2）{
边缘顶部：2米；
}
}
.定价标题，
.定价{
背景色：白色；
盒影：0.1px银；
填充：1em；
宽度：80%；
}
.定价标题{
显示器：flex；
弯曲方向：立柱；
}
.定价按钮{
页边顶部：自动；
}
保险商实验室{
保证金：0；
}
ulli{
左边距：1米；
}
h1，
氢{
边缘：0.125em0；
}
钮扣{
字体：继承；
}

自由的
0$
简短描述

开始
保险费
5$
长描述长描述长描述长描述长描述长描述长描述

开始

第1点
第2点
第3点


第1点
第2点
第3点
第4点
第5点
第6点
第7点

Flex box将允许您完成您想要的任务。您也可以查看
bootstrap grid
，这里有一个参考。您可以使用col-sm-6 col-xs-12代替col-xs-6。@Leothelion我感谢您的评论，但请先阅读要求。问题不在于实现响应性。这是关于对齐不同容器中的内容（引导列）@Harry试一试->是的，我想到了。复制代码似乎是个坏主意，我宁愿使用JS。我发布这个问题的唯一原因是我想知道是否有一个标准的解决方案，这样我就不会试图重新发明轮子。只是看到你的小提琴，它并不能解决问题。按钮没有对齐。我已经更新了我的问题，包括代码片段和比较图像，以帮助其他人理解问题。要对齐按钮，您需要在div中调整它们，或者应用相同的概念将它们放在自己的行中-我不能为您完成所有工作！哇！天才的回答。根据屏幕宽度改变顺序是非常棒的。我接受这一正确答案，但我想在这里添加一个建议：行
flex:150%
应移动到媒体查询块中，以便在小屏幕上卡占用的空间最小，并且没有空的间距。是的，你应该放弃这个
flex:150%
以获得更小的分辨率。