我在创建以下 UI 时遇到问题：
我怎样才能实现这种设计？
【问题讨论】：
标签： twitter-bootstrap responsive-design twitter-bootstrap-3 media-queries
由于 Bootstrap 3 是“移动优先”，因此使用 xs 类从最小设备（“屏幕 4”）的所需布局开始，然后从那里开始。
下面是一个帮助您入门的示例：http://bootply.com/129266
【讨论】：
在网格系统中使用响应式表格。在这里，我为你做了第 1 个屏幕：
<div class="table-responsive">
<table width="100%" class="table table-striped table-bordered table-hover">
<tr >
<td class="col-md-4" rowspan="2" style="background-color:red"> </td>
<td class="col-md-2" style="background-color:blue"> </td>
<td class="col-md-2" style="background-color:blue"> </td>
<td class="col-md-2" style="background-color:blue"> </td>
<td class="col-md-2" style="background-color:blue"> </td>
</tr>
<tr>
<td style="background-color:blue"> </td>
<td style="background-color:blue"> </td>
<td style="background-color:blue"> </td>
<td style="background-color:blue"> </td>
</tr>
<tr>
<td style="background-color:blue"> </td>
<td style="background-color:blue"> </td>
<td style="background-color:blue"> </td>
<td style="background-color:blue"> </td>
<td style="background-color:blue"> </td>
</tr>
</table>
</div>
注意 td 标签 col-md-4 和 col-md-2 中的类。使用网格系统，它们必须加起来为 12。使用更大的数字会为该列分配更多空间。根据需要调整表格宽度。
【讨论】：