Menu
I would like to show the right position div into the left position in the mobile view. I am using bootstrap 4. Below I am adding my HTML code. The right image should come first at in mobile view. Thanks In Advance.
<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>
751
Use the 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>
<!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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
