Responsive design 如何创建包含3列的多个项目并做出响应

我想创建一个布局，有2个项目并排，每个项目有3列。第一列和第二列为固定宽度，第三列需要填充其余宽度，并根据文本需要增加高度。这两个并列项目将是项目父分区的50%拆分。如下所示

-------------------------------------------   ------------------------------------------- 
| col1 | col2 | col 3 with copy that wraps |  | col1 | col2 | col 3 with copy that wraps |
|               when there is lots of text |  |               when there is lots of text |
|               in this column             |  |               in this column             |
-------------------------------------------   ------------------------------------------- 

或者，当父div较小时也是这样

 --------------------------------    -------------------------------- 
| col1 | col2 | col 3 with copy  |  | col1 | col2 | col 3 with copy  |
|               that wraps when  |  |               that wraps when  |
|               there is lots of |  |               there is lots of |
|               text in this     |  |               text in this     |
|               column           |  |               column           |
 --------------------------------    -------------------------------- 

这很接近，但我真的不想在文本的第三列宽度上使用百分比

---

如果使用引导，可以使用列分割方法并排进行布局

<div class="row">
    <!-- first item -->
    <div class="col-md-6">

        <div class="row">
            <!-- make column inside the outer column -->
            <div class="col-md-3">
                <!-- col1 -->
            </div>
            <div class="col-md-3">
                <!-- col2 -->
            </div>
            <div class="col-md-6">
                <!-- col 3 with wording -->
            </div>

        </div>

    </div>

    <!-- second item -->
    <div class="col-md-6">

        <div class="row">
            <!-- make column inside the outer column -->
            <div class="col-md-3">
                <!-- col 1 -->
            </div>
            <div class="col-md-3">
                <!-- col 2 -->
            </div>
            <div class="col-md-6">
                <!-- col 3 with wording -->
            </div>

        </div>

    </div>

</div>

每行将考虑为<代码> COL-MD 12 。通过调整列大小，计划如何使用列大小。12是最大值，一半是6，依此类推。希望对你有帮助