1 Correct answer
acobbcarthagemills wrote
I have a static PHP page that has a column on the left with images and on the right with text. I want to make it responsive...
In this Bootstrap 4 example, the layout is 1 col on xs, 2 cols on sm & md, 4 cols on lg & xl. With Flexbox Order, we can keep text & images correctly stacked on mobile devices.
This is the working code I used.
...<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Flexbox Order</title>
<meta name="viewport" content="width=dev
4
Replies
acobbcarthagemills wrote
I have a static PHP page that has a column on the left with images and on the right with text. I want to make it responsive...
In this Bootstrap 4 example, the layout is 1 col on xs, 2 cols on sm & md, 4 cols on lg & xl. With Flexbox Order, we can keep text & images correctly stacked on mobile devices.
This is the working code I used.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Flexbox Order</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
html, body { height: 100%; }
/**Scale fonts for any screen size**/
body { font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (1600 - 300)));
line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
/**flexbox stack order on mobile devices**/
@media screen and ( max-width: 560px) {
.a { order: 1; }
.b { order: 2; }
.c { order: 4; }
.d { order: 3; }
.e { order: 5; }
.f { order: 6; }
.g { order: 8; }
.h { order: 7; }
</style>
</head>
<body>
<nav class="text-center">Navigation goes here...</nav>
<header class="text-center">Header goes here....</header>
<hr>
<div class="container-fluid">
<div class="row row-eq-height">
<!--1 COLUMN ON XS,
2 COLUMNS ON SM & MD, 4 COLUMNS ON LG -->
<div class="col-sm-6 col-lg-3 align-self-center a"> <img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder"> </div>
<div class="col-sm-6 col-lg-3 align-self-center b">
<h3>Image 1 Text</h3>
<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis, error nostrum aspernatur, veritatis hic rem cumque minus odit.</p>
</div>
<div class="col-sm-6 col-lg-3 align-self-center c">
<h3>Image 2 Text</h3>
<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
<div class="col-sm-6 col-lg-3 align-self-center d"> <img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder"> </div>
<div class="col-sm-6 col-lg-3 align-self-center e"> <img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder"> </div>
<div class="col-sm-6 col-lg-3 align-self-center f">
<h3>Image 3 Text</h3>
<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis, error nostrum aspernatur, veritatis hic rem cumque minus odit.</p>
</div>
<div class="col-sm-6 col-lg-3 align-self-center g">
<h3>Image 4 Text</h3>
<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis, error nostrum aspernatur, veritatis hic rem cumque minus odit.</p>
</div>
<div class="col-sm-6 col-lg-3 align-self-center h"> <img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder"> </div>
</div>
<hr>
<footer class="text-center">Footer goes here...</footer>
</div>
<!--First jQuery then Popper then Bootstrap 4-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Popper JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<!--Bootstap 4 JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
AdChoices