Question

我想在移动视图中显示右侧位置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>

Answer 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>

<script src="http://codeply.com/js/embed.js"></script><div data-codeply="GW6MbfBVbA" ></div>

Answer 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>

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

2 个答案: