i want to have drag and drop sortable layout for my bootstrap cards. i did dowith sortable jquery plugin but it is draging and droping in a row. i want that if i have card 1 that is bigger height col-6 size in one row, that i can have next to it in the same row card 3 and card 4 that are both col-3 size, so that card3 and card4 are one above eachother but both in the same row as card1.
this is my code for the above picure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery UI Sortable - Display as grid</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="card-container">
<div class="row">
<div class="col-6">
<div class="card">Card 1
<p>
some content so that the card is bigger
</p></div>
</div>
<div class="col-6">
<div class="card">Card 2</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="card">Card 3</div>
</div>
<div class="col-3">
<div class="card">Card 4</div>
</div>
<div class="col-12">
<div class="card">Card 5</div>
</div>
<div class="col-6">
<div class="card">Card 6</div>
</div>
<div class="col-6">
<div class="card">Card 7</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function() {
$(".row").sortable({
connectWith: ".row"
}).disableSelection();
});
</script>
--- i want to freely move cards in columns and rows where there is space for the specific card, but the size of columns for the cards doesnt change. so i want - that card 1 has next card 6 like it is but also card 7 belolow card 6 because there is space, or card 3 and card4 bellow card 6 in the same row