JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
	
	<div class="block">block</div>
	
    <div class="item">item 4</div>
    <div class="item">item 5</div>
    <div class="item">item 6</div>
</div>

CSS

* {
    box-sizing: border-box;
}

.items {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
}

.item {
    background: #ccc;
    max-width: 33.333%;
    width: 33.333%;
    border: 1px solid #999;
    padding: 15px;
    cursor: pointer;
}

.item:hover {
    background: #000;
    color: #fff;
}

.block {    
    background: #00f;
    padding: 15px;
    color: #fff;
	margin: 15px 0;
	width: 100%;
	max-width: 100%;
}

.active,
.active:hover {
    background: #00f;
    color: #fff;
    cursor: text;
}

JavaScript

(function() {

    $('.item').on('click', function() {
        $('.active').removeClass('active');
        $(this).addClass('active');

        var index = $(this).index('.item');
        var block = $('.block');

        function transferBlock(i) {
          block.insertAfter($('.item').eq(i));
        }

        switch((index + 1) % 3) {
          case (0):
            transferBlock(index);
            break
           case(1):
            transferBlock(index + 2);
            break
          case(2):
            transferBlock(index + 1);
            break;
        }
    });
})();