Отображение правого положения рабочего стола в левом положении на мобильном экране - PullRequest
Новая
       2

Отображение правого положения рабочего стола в левом положении на мобильном экране

5 голосов
/ 02 апреля 2019

Я хотел бы показать правую позицию 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>

Ответы [ 2 ]

4 голосов
/ 02 апреля 2019

Используйте служебные классы flex order ... 

    <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>
1 голос
/ 02 апреля 2019 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...