html - 桌面右侧位置 div 在移动 View 中显示在左侧位置

标签 html css bootstrap-4

我想在移动 View 中将右侧位置 div 显示到左侧位置。我正在使用 bootstrap 4。下面我添加了我的 HTML 代码。正确的图像应该首先出现在移动 View 中。提前致谢。

<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 &nbsp;<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>

最佳答案

使用 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 &nbsp;<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>

关于html - 桌面右侧位置 div 在移动 View 中显示在左侧位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55470212/

相关文章:

html - <p> 中的文本在 IE/MS Edge 中部分隐藏在 Bootstrap 中

html - 将我的表单字段定位到图像上

javascript - 可选择的 jquery ui 重新排序 html 标签内容

html - Bootstrap 3 中的导航栏折叠在 IE8 中不起作用

html - svg+xml base64 url​​ 编码的 firefox 内容 : url(); 问题

javascript - 当鼠标悬停仍在父级上时,如何使 .hover div 保持打开状态?

html - 页面不会在任何浏览器中滚动——我使用的是过时的 CSS 吗?

css - Bootstrap 网格在动态宽度容器内不起作用

javascript - 发布图片的脚本

css - 剪切页面底部的div