我如何才能正常地在文本右侧显示图像，而在移动设备上显示文本下面的图像？
我如何才能正常地在文本右侧显示图像，而在移动设备上显示文本下面的图像？
提问于 2019-07-19 21:30:40
我想在桌面上的文本右侧显示一个图像，但在移动设备上显示相同的图像。努力通过谷歌找到答案，我自己也无法破解它。
有什么帮助吗？
这就是我到目前为止所拥有的。
谢谢!
我尝试过使用col-xs col-sm，但没有达到我想要的效果
http://jsfiddle.net/ncyL2hat/
.text {
text-align: center;
color: black;
font-size: 30px;
}<div class="container">
<div class="row">
<div class="row justify-content-md-center">
<div class="col-sm-6">
<div class="text">
<h1> Header</h1>
<h1> sub-header</h1>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec venenatis tortor, id luctus nisi. Mauris aliquet felis ac lacus venenatis, eget porttitor est finibus. Aenean mi odio, sollicitudin et quam ut, pharetra eleifend magna. Vestibulum
lorem metus, ultricies sed ipsum eget, vulputate rutrum enim. Aenean mattis sit amet justo nec hendrerit. Nulla quis volutpat tortor. Nunc ante enim, pharetra sed libero vitae, iaculis egestas nulla. Aenean ullamcorper, mauris vel ultricies
blandit, erat augue gravida dui, vitae aliquet urna eros eu tellus. Nunc sagittis mi ex, sed gravida dolor imperdiet nec.
</p>
</div>
</div>
<div class="col-sm-6">
<div class="text">
<img src="https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg" class="img-fluid" />
</div>
</div>
</div>
</div>
</div>
回答 1
Stack Overflow用户
发布于 2019-11-19 14:35:31
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Document</title>
<style type="text/css">
.text {
text-align: center;
color: black;
font-size: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="row justify-content-md-center">
<div class="col">
<div class="text">
<h1> Header</h1>
<h1> sub-header</h1>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec venenatis tortor, id luctus nisi. Mauris aliquet felis ac lacus venenatis, eget porttitor est finibus. Aenean mi odio, sollicitudin et quam ut, pharetra eleifend magna. Vestibulum
lorem metus, ultricies sed ipsum eget, vulputate rutrum enim. Aenean mattis sit amet justo nec hendrerit. Nulla quis volutpat tortor. Nunc ante enim, pharetra sed libero vitae, iaculis egestas nulla. Aenean ullamcorper, mauris vel ultricies
blandit, erat augue gravida dui, vitae aliquet urna eros eu tellus. Nunc sagittis mi ex, sed gravida dolor imperdiet nec.
</p>
</div>
</div>
<div class="col">
<div class="text">
<img src="https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg" class="img-fluid" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57113572
复制相关文章
相似问题
腾讯云开发者
