桌面右位置div在移动视图的左位置显示
桌面右位置div在移动视图的左位置显示
提问于 2019-04-02 16:30:44
我想在移动视图中显示右侧位置div到左侧位置。我使用的是bootstrap 4。下面我添加了我的HTML代码。在移动视图中，正确的图像应该放在第一位。提前谢谢。
<div class="card">
<div class="row no-gutters">
<div class="col-8">
<div class="card-block">
<h4 class="card-title">v</h4>
<p class="card-text">Robotics is an interdisciplinary branch of engineering and science that includes mechanical engineering, electronic engineering, information engineering, computer science, and others. Robotics deals with the design, construction, operation, and
use of robots, as well as computer systems for their control, sensory feedback, and information processing.</p>
<a href="#" title="">Explore <i class="fa fa-caret-right"></i></a>
</div>
</div>
<div class="col-4">
<img src="./images/product-development.jpg" class="img-fluid" alt="product-development">
</div>
</div>
</div>回答 2
Stack Overflow用户
发布于 2019-04-02 16:33:16
使用flex order utility classes...
<div class="card">
<div class="row no-gutters">
<div class="col-8 order-last order-sm-first">
<div class="card-block">
<h4 class="card-title">v</h4>
<p class="card-text">Robotics is an interdisciplinary branch of engineering and science that includes mechanical engineering, electronic engineering, information engineering, computer science, and others. Robotics deals with the design, construction, operation,
and use of robots, as well as computer systems for their control, sensory feedback, and information processing.</p>
<a href="#" title="">Explore <i class="fa fa-caret-right"></i></a>
</div>
</div>
<div class="col-4 order-first">
<img src="./images/product-development.jpg" class="img-fluid" alt="product-development">
</div>
</div>
</div>
<script src="http://codeply.com/js/embed.js"></script><div data-codeply="GW6MbfBVbA" ></div>
Stack Overflow用户
发布于 2019-04-02 21:13:33
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card">
<div class="row no-gutters">
<div class="col-md-8 order-md-1 order-sm-12 order-12">
<div class="card-block">
<h4 class="card-title">v</h4>
<p class="card-text">Robotics is an interdisciplinary branch of engineering and science that includes mechanical engineering, electronic engineering, information engineering, computer science, and others. Robotics deals with the design, construction, operation, and
use of robots, as well as computer systems for their control, sensory feedback, and information processing.</p>
<a href="#" title="">Explore <i class="fa fa-caret-right"></i></a>
</div>
</div>
<div class="col-md-4 order-md-12 order-sm-1 order-1">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" class="img-fluid" alt="product-development" style="width: 100%;">
</div>
</div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55470212
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号