Bootstrap - 投资组合图像左侧，标题和描述右侧答案

【问题标题】：Bootstrap - Portfolio image left, title and description rightBootstrap - 投资组合图像左侧，标题和描述右侧
【发布时间】：2019-01-14 21:33:27
【问题描述】：

我正在尝试创建我的投资组合网站，但我有点卡住了......

我想让投资组合图片在左侧，标题和描述在右侧。

因此，结构将是：

图片 - 文字

我尝试编写了一些代码并且它可以工作，但我不确定这是否是最好的方法。

<section class="section works" id="works">
    <div class="container">
        <div class="row">
            <div class="works-item col-md-12 col-xs-12">
                    <div class="row">
                        <div class="works-image col-md-6">
                            <img src="1.jpg" alt="">
                            <div class="overlay"></div>
                        </div>
                        <div class="item-info col-md-6">
                            <h4 class="item-name">Some Title here</h4>
                            <p class="item-type">Description should be here</p>
                        </div>
                    </div>
            </div>
        </div>
</section>

这是引导程序 3

【问题讨论】：

查看 Bootstrap “媒体对象” - 可能是您正在寻找的内容
@gavgrif 对不起，我忘了说。据我了解，媒体对象在移动设备上不是“响应式”的。在移动设备上，我需要它是一个经典的结构，即文本上方的图像。
您应该能够应用 onw 的媒体查询来更改 xs 大小视口中的布局 - 只需从 display: table-cell 更改为 display: table-row 即可 - .media-body , .media-left, .media-right { display: table-row;垂直对齐：顶部； }

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

你使用的方式是正确的。但它会在您使用 col-md 的某些设备上工作

如果你愿意图片 - 文字

图片 - 文字

适用于所有设备。

<section class="section works" id="works">
    <div class="container">
        <div class="row">
            <div class="works-item col-md-12 col-xs-12">
                    <div class="row">
                        <div class="works-image col-xs-6">
                            <img src="1.jpg" alt="">
                            <div class="overlay"></div>
                        </div>
                        <div class="item-info col-xs-6">
                            <h4 class="item-name">Some Title here</h4>
                            <p class="item-type">Description should be here</p>
                        </div>
                    </div>
            </div>
        </div>
</section

如果你想要 40% 的图像和 60% 的文本分别使用 col-xs-4 col-xs-8

【讨论】：

谢谢，我只是想看看这是否是一个好方法。我想要移动设备上的经典结构，全角图像和下面的文本，所以它工作正常。再次感谢