引导两列布局图像和文本响应

Question

在引导程序中，我该如何拆分图像和文本的列以像下面的图像一样响应

Answer 1

制作一个页面，看起来像您帖子中的图像。我会在引导程序3中做类似的事情。

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <Image scr="">
            <Image scr="">
            <Image scr="">
        </div>
        <div class="col-xs-6">text</div>
        </div>
    </div>
</div>

如果您希望列大小响应屏幕大小，只需添加该大小的类。例如，如果您希望一列在小屏幕上占据整个屏幕宽度，而在中到大屏幕上只能占据一半，则可以

<div class="col-xs-12 col-md-6" >...</div>

Answer 2

https://jsfiddle.net/6p1qmvst/

<div class="wrapper">
    <div class="box">
        <div class="images">
            <div class="image">
                <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
            </div>
            <div class="image">
                <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
            </div>
            <div class="image">
                <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
            </div>
        </div>
    </div>
  <div class="box"></div>
</div>

<style>
.wrapper {
    display: grid;
    grid-template-columns: 50vw 50vw;
    grid-gap: 0;
}

.box {
    border: 1px solid;
}

.box+.box {
    border-left: 0;
}

.images {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

body {
    margin: 0;
}

.image {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center
}

img {
    border: 1px solid;
}
</style>