I'm relatively new with frontend so having a bit of problem in organizing a layout using bootstrap 4. I'm trying to build a banner for the landing page. I've attached the desired layout look please check it out. Below is my code which is all messing up the layout and coming on top of another.
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-12">
<img src="assets/images/logo.png" alt="">
</div>
<div class="col-sm-12 ml-auto">
<h1 class="presentation-title">COMPANY NAME IN H1</h1>
<div class="fog-low">
<img src="assets/img/fog-low.png" alt="">
</div>
<div class="fog-low right">
<img src="assets/img/fog-low.png" alt="">
</div>
<h2 class="presentation-subtitle text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</h2>
</div>
</div>
</div>
You can fiddle around with this example and come up with idea on how to align and for logo set image size when u enter it inside the card view maybe <img src="picname.jpg" alt="pic description" width="150" height="150"> to force resize so image don't break the view. Good Luck.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="row" style="margin:10px">
<div class="col-sm-4">
<div class="card" style="margin:10px">
<div class="card-body">
<h5 class="card-title">Logo</h5>
<p class="card-text">Can Add logo here</p>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="card" style="margin-bottom:10px">
<div class="card-body">
H1 HEADING
</div>
</div>
<div class="card">
<div class="card-body">
Small description in a paragraph.
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Related
For example:
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="image">
<img src="https://picsum.photos/1200/1200" alt="" class="img-fluid">
</div>
</div>
<div class="col-lg-4">
<div class="text">
<h1>Text Title</h1>
</div>
</div>
</div>
</div>
The sandbox code:
https://codesandbox.io/s/interesting-euler-sh22vn?file=/index.html
Photo what I want:
https://ibb.co/MnLQf6n
My problem is when I add fix height, the text is moving when I change screen view.
I need to vertical align the text to image center point on desktop screen.
just add align-items-center to row and it will worce the layout to be vertically center learns about flex from here and bootstrap flex properties from here
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row align-items-center">
<div class="col-8">
<div class="image">
<img
src="https://picsum.photos/1200/1200"
alt=""
class="img-fluid"
/>
</div>
</div>
<div class="col-4">
<div class="text">
<h1>Text Title</h1>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>
This will solve your problem.
<div class="row align-items-center">
I am trying to follow along on Colt Steele's course and for some reason, my cards will not show up. Anyone know why my cards won't show up? I'm trying to do three image overlay cards that are decked with equal spacing between each other by using some basic bootstrap add-ins but they won't even show up.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="app3.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
#header {
background-image: url("imgs/header.jpeg");
}
</style>
<title>Pattern</title>
</head>
<body>
<nav class="navbar bg-dark navbar-dark">
<div class="container">
Quarantine Pal
</div>
</nav>
<section id="header" class="jumbotron text-center">
<h1 class="display-3">Best 90s Anime</h1>
<p class="lead">Lorem ipsum</p>
Add to List
Vote
</section>
<div class="card-deck">
<div class="card">
<img src="https://dw9to29mmj727.cloudfront.net/properties/2016/432-SeriesThumbnails_SM__400x320.jpg" class="card-img-top" alt="Sailor Moon">
<div class="card-body">
<h5 class="card-title">Sailor Moon</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="https://dw9to29mmj727.cloudfront.net/properties/2016/15-SeriesThumbnailsAnime_INY_400x320.jpg" class="card-img-top" alt="Inuyasha">
<div class="card-body">
<h5 class="card-title">Inuyasha</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="https://store-images.s-microsoft.com/image/apps.39852.14455250034361967.824623c3-91b6-402f-9a68-c66bfac9bc20.7bfae929-5b2a-4efe-9639-5ffd1e2de297?mode=scale&q=90&h=720&w=1280&background=%23FFFFFF" class="card-img-top" alt="Dragon Ball Z">
<div class="card-body">
<h5 class="card-title">Dragon Ball Z</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
I have a nice web page built up with cards but they simply dont seem to work when i paste it in the editor in the bootstrapemail editor which returns pure css code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vrindavan Chandrodaya Mandir</title>
<meta name="description" content="">
<meta name="author" content="LayoutIt!">
<!--Template based on URL below-->
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/starter-template/">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- <link href="css/bootstrap.min.css" rel="stylesheet">-->
<!-- <link href="css/Bootstrap.css" rel="stylesheet">-->
</head>
<body class="" style="background-color: azure">
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
<div class="card-footer">Hare Krishna</div>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body></html>
I am using https://bootstrapemail.com/editor to get pure css to make some nice emails. Where am I going wrong? I know only bootstrap as my go to platform for designing.
I have gone through your code and with bootstrap email and I found that you missed some divs like container . You didn't mentioned
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> as they did.
//Here is a sample
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="all" href="/assets/application-mailer-dbc5154d3c4160e8fa7ef52fa740fa402760c39b5d22c8f6d64ad5999499d263.css" />
<style><!-- Add custom styles that you want inlined here --></style>
</head>
<body class="bg-light">
<preview>Thank you for riding with Lyft!</preview>
<div class="container">
<img class="mx-auto mt-4 mb-3" width="42" height="30" src="https://s3.amazonaws.com/lyft.zimride.com/images/emails/logo/v2/logo_44#2x.png" />
<div class="card mb-4" style="border-top: 5px solid #ff00bf;">
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
<div class="card-footer">Hare Krishna</div>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
</div>
</div>
</body></html>
//result
here is html code :
i wanna keep the div same height even the size of the pics are long or text is long .. is there a solution for it in css ??
here is a link to code: https://jsfiddle.net/Youssef_X/81drbgz3/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<!--=============PRODUCTE ITEMS START HERE=======-->
<section>
<div class="container product-lists">
<!-- ====== FIRST ROW HERE ===== -->
<div class="row">
<div class="col-md-4">
<div class="product-list">
<img src="assets/img/game1.jpg" alt="Planet gaming products" />
<h3 class="title">Eurocoin Interactive</h3>
<p class="description">It is a long established fact that a reader will be distracted.
</p>See more
</div>
</div>
<div class="col-md-4">
<div class="product-list">
<img src="assets/img/game2.png" alt="Planet gaming products" />
<h3 class="title">Eurocoin Interactive</h3>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
when an unknown printer took a galley of type and scrambled it to make a type specimen book
</p>see more
</div>
</div>
<div class="col-md-4">
<div class="product-list">
<img src="assets/img/machine3.png" alt="Planet gaming products" />
<h3 class="title">Eurocoin Interactive</h3>
<p class="description"> when an unknown printer took a galley of type and scrambled it to make a type specimen book
</p>see morer
</div>
</div>
<!-- ======= END FIRST ROW ====== -->
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I would recommend using CSS Flexbox (align-items). ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/ )
I think that could solver your issue?
I see you are using Bootstrap, looks like this may be your solution:
http://getbootstrap.com.vn/examples/equal-height-columns/
Basicly adding the .row-eq-height class.
<body>
<!--=============PRODUCTE ITEMS START HERE=======-->
<section>
<div class="container product-lists">
<!-- ====== FIRST ROW HERE ===== -->
<div class="row row-eq-height">
<div class="col-md-4">
<div class="product-list">
<img src="assets/img/game1.jpg" alt="Planet gaming products" />
<h3 class="title">Eurocoin Interactive</h3>
<p class="description">It is a long established fact that a reader will be distracted.
</p>See more
</div>
</div>
<div class="col-md-4">
<div class="product-list">
<img src="assets/img/game2.png" alt="Planet gaming products" />
<h3 class="title">Eurocoin Interactive</h3>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
when an unknown printer took a galley of type and scrambled it to make a type specimen book
</p>see more
</div>
</div>
<div class="col-md-4">
<div class="product-list">
<img src="assets/img/machine3.png" alt="Planet gaming products" />
<h3 class="title">Eurocoin Interactive</h3>
<p class="description"> when an unknown printer took a galley of type and scrambled it to make a type specimen book
</p>see morer
</div>
</div>
<!-- ======= END FIRST ROW ====== -->
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Hey Bro as u are using BS-4 this works on flex box properties and all the cols inside rows automatically get same height.
I think u have a working code
But i have added some colors to make it more clear
Note:- If u want all the conetents center aligned just add "align-items-center" class on row
.container.product-lists > .row{background-color:grey}
.container.product-lists > .row .col-md-4{border:1px solid #dddddd}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<!--=============PRODUCTE ITEMS START HERE=======-->
<section>
<div class="container product-lists">
<!-- ====== FIRST ROW HERE ===== -->
<div class="row">
<div class="col-md-4">
<div class="product-list">
<img src="assets/img/game1.jpg" alt="Planet gaming products" />
<h3 class="title">Eurocoin Interactive</h3>
<p class="description">It is a long established fact that a reader will be distracted.
</p>See more
</div>
</div>
<div class="col-md-4">
<div class="product-list">
<img src="assets/img/game2.png" alt="Planet gaming products" />
<h3 class="title">Eurocoin Interactive</h3>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
when an unknown printer took a galley of type and scrambled it to make a type specimen book
</p>see more
</div>
</div>
<div class="col-md-4">
<div class="product-list">
<img src="assets/img/machine3.png" alt="Planet gaming products" />
<h3 class="title">Eurocoin Interactive</h3>
<p class="description"> when an unknown printer took a galley of type and scrambled it to make a type specimen book
</p>see morer
</div>
</div>
<!-- ======= END FIRST ROW ====== -->
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I have a order of divs in bootstrap:
On normal computers i want:
first second third
But on mobile i want:
third
second
first
I have checked the bootstrap grid system page and came up with this:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col order-md-1 order-sm-3 order-xs-3">
First,
</div>
<div class="col order-md-2 order-sm-2 order-xs-2">
Second,
</div>
<div class="col order-md-3 order-sm-1 order-xs-1">
Third,
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
On mobile i keeps displaying:
first
second
third
Can anyone tell me what i am doing wrong?
This is all you need to re-order. The -xs- infix has been removed, and you just need the order for the smallest and medium.
https://codeply.com/go/mNZVT7Vpng
<div class="container">
<div class="row">
<div class="col order-md-1 order-3">
First,
</div>
<div class="col order-2">
Second,
</div>
<div class="col order-md-3 order-1">
Third,
</div>
</div>
</div>
A-B-C to C-B-A
Also see: Bootstrap 4 grid - 3 stacked columns on left, 1 on right