Created
October 10, 2022 09:18
-
-
Save tranchausky/e41ed637d3b36cd22b188315ff582f9c to your computer and use it in GitHub Desktop.
bootstrap show column first in mobile (order change)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="jumbotron text-center"> | |
| <h1>My First Bootstrap Page</h1> | |
| <p>Resize this responsive page to see the effect!</p> | |
| </div> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-sm-6 order-lg-first order-md-first order-sm-first"> | |
| <h3 class="">Column 1</h3> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> | |
| <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> | |
| </div> | |
| <div class="col-sm-6 order-first"> | |
| <h3>Column 2 -mobile will show first</h3> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> | |
| <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment