How reverse the order of columns in Bootstrap

If you want to change order on md and larger sizes you can use order-md-, this is provided by bootstrap. It looks like, if you want to change order only on md size you will have to define normal order on one larger size. Use the below codes,

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
        </style>
    </head>
    <body>
        <h2>Reverse the order of columns in Bootstrap</h2>
        <h3>For All</h3>
        <div class="row">
            <div class="col-12 order-2">2</div>
            <div class="col-12 order-1">1</div>
        </div>
        <h3>For md size device</h3>
        <div class="row">
            <div class="col-md-12 order-md-2">2</div>
            <div class="col-md-12 order-md-1">1</div>
        </div>
    </body>
</html>
How reverse the order of columns in Bootstrap
About author
Priyanka Sharma
Priyanka Sharma
Website Developer
0 comments
Be a First Comment
Add Your Comment