我正在尝试实现非常简单的两行堆叠，但似乎无法找到解决方案。我已经尝试过Bootstrap和Foundation for solutions。 正如你在照片中看到的那样，我有2行，每行有3列。当屏幕尺寸为中/小时，我需要列为2个部分，标题4应位于Heading3下方的Heading 3和Heading5旁边。标题6跟在后面。
我提前大家感谢大家！
Bootstrap代码
<div class="row>
<div class="col-md-4 col-sm-6">
<h2>Heading1</h2>
</div>
<div class="col-md-4 col-sm-6">
<h2>Heading2</h2>
</div>
<div class="col-md-4 col-sm-6">
<h2>Heading3</h2>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">
<h2>Heading4</h2>
</div>
<div class="col-md-4 col-sm-6">
<h2>Heading5</h2>
</div>
<div class="col-md-4 col-sm-6">
<h2>Heading6</h2>
</div>
</div>
基础代码
<div class="row">
<div class="large-4 medium-6 columns">
<div class="primary callout">
<p>Four columns</p>
</div>
</div>
<div class="large-4 medium-6 columns">
<div class="primary callout">
<p>Four columns</p>
</div>
</div>
<div class="large-4 medium-6 end columns">
<div class="primary callout">
<p>Four columns</p>
</div>
</div>
</div>
<div class="row">
<div class="large-4 medium-6 columns">
<div class="primary callout">
<p>Four columns</p>
</div>
</div>
<div class="large-4 medium-6 columns">
<div class="primary callout">
<p>Four columns</p>
</div>
</div>
<div class="large-4 medium-6 columns">
<div class="primary callout">
<p>Four columns</p>
</div>
</div>
</div>
答案 0 :(得分：0)
让我们尝试通过Bootstrap。
我们只需要一行六个单元格。这是因为Bootstrap wraps the extra cells onto new lines。
类col-xs-6的块从12列中获取6个。它正好是屏幕宽度的一半。这个课程有效，直到a condition for a wider screen开始行动。当屏幕为col-sm-4或更宽时，具有类992px的块占据屏幕宽度的三分之一。
请检查结果。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-4">
<h2>Heading1</h2>
</div>
<div class="col-xs-6 col-md-4">
<h2>Heading2</h2>
</div>
<div class="col-xs-6 col-md-4">
<h2>Heading3</h2>
</div>
<div class="col-xs-6 col-md-4">
<h2>Heading4</h2>
</div>
<div class="col-xs-6 col-md-4">
<h2>Heading5</h2>
</div>
<div class="col-xs-6 col-md-4">
<h2>Heading6</h2>
</div>
</div>
</div>
答案 1 :(得分：0)
无需使用两个不同的行。 Bootstrap默认包装下一行中的额外单元格/列。 Read documentation
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<h2>Heading1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur
</p>
<button class="btn btn-default"> more info.</button>
</div>
<div class="col-md-4 col-sm-6">
<h2>Heading2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur
</p>
<button class="btn btn-default"> more info.</button>
</div>
<div class="col-md-4 col-sm-6">
<h2>Heading3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur
</p>
<button class="btn btn-default"> more info.</button>
</div>
<div class="col-md-4 col-sm-6">
<h2>Heading4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur
</p>
<button class="btn btn-default"> more info.</button>
</div>
<div class="col-md-4 col-sm-6">
<h2>Heading5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur
</p>
<button class="btn btn-default"> more info.</button>
</div>
<div class="col-md-4 col-sm-6">
<h2>Heading6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur
</p>
<button class="btn btn-default"> more info.</button>
</div>
</div>
</div>