We can change the grid order using simple css3 keyword order .check the code snippet below.
<!DOCTYPE html>
<html>
<head>
<title>Change Grid Order</title>
<style>
.order-grid{
display: grid;
grid-template-columns: repeat(2,1fr);
column-gap: 3%;
}
.order-grid .section-one,.order-grid .section-two{
width:100%;
font-size:20px;
font-weight:600;
text-align:center;
color:#ffffff;
padding:50px 0px;
}
.order-grid .section-one{
background: brown;
order:2;
}
.order-grid .section-two{
background: red;
order:1;
}
</style>
</head>
<body>
<div class="order-grid">
<div class="section-one">grid one</div>
<div class="section-two">grid two</div>
</div>
</body>
</html>`
Top comments (1)
informative snippet.