Menu Close

How reverse the order of columns in Bootstrap

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,

Find The Code Here

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <h3 class="text-center mb-2">Reverse the order of columns in Bootstrap</h3>
        <hr class="my-3">
        <h5 class="text-center">For All</h5>
        <div class="row mb-4">
            <div class="col-6 order-2 text-center">order-2</div>
            <div class="col-6 order-1 text-center">order-1</div>
        </div>
        <h5 class="text-center">For md size device</h5>
        <div class="row">
            <div class="col-md-6 order-md-1 text-center">order-md-1</div>
            <div class="col-md-6 order-md-2 text-center">order-md-2</div>
        </div>
    </body>
</html> 

Output

Reverse the order of columns in Bootstrap


For All
order-2
order-1
For md size device
order-md-1
order-md-2
Posted in Bootstrap, CSS, HTML

You can also read...

Leave a Reply

Your email address will not be published. Required fields are marked *