JSFiddle - React, Tailwind, and code Playground

by maros_urbanec

HTML

<section class="container">    
    <div class="box box1">Box1</div>
    <div class="box box2">Box2</div>
    <div class="box box3">Box3</div>
</section>

<button id="toggle">Toggle</button>

SCSS

.box {
    width: 5em;
    height: 5em;
    &.box1 {
        background-color: red;
    }
    &.box2 {
        background-color: gold;
        width: 6em;
    }
    &.box3 {
        background-color: lime;
    }
}

.container {
    display: flex;
    height: 20em;
    width: 20em;
    border: 3px solid gold;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    
    .box1 {
        order: 2;
    }
    .box2 {
        order: 1;
    }
    .box3 {
        order: 2;
    }
}

.container.flex2 {
    .box2 {
        margin-top: 30%;
        margin-bottom: 30%;
    }
}

JavaScript

$('#toggle').click(function(){
   $('.container').toggleClass('flex2');
});