桌面右侧位置 div 在移动视图中显示在左侧位置答案

【问题标题】：Desktop right position div show in left position in mobile view桌面右侧位置 div 在移动视图中显示在左侧位置
【发布时间】：2019-04-03 14:12:54
【问题描述】：

我想在移动视图中将右侧位置 div 显示到左侧位置。我正在使用引导程序 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 &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>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

使用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>

&lt;script src="http://codeply.com/js/embed.js"&gt;&lt;/script&gt;&lt;div data-codeply="GW6MbfBVbA" &gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

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

【讨论】：

虽然此代码 sn-p 可以解决问题，但 including an explanation 有助于提高您的回复质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。