I’m searching for a solution, but I’m not sure if we can do it using only CSS.
I’m trying to create a responsive dashboard where each panel has a different height. I would like the most important panels to be at the top. In my current test using flexbox, the tallest panel defines the height of the row.
Is there a way (with or without flexbox) to move the panels below to the top, as shown in this image?
.overview {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.overview .card {
margin: 10px;
background-color: red;
flex: 1 1 calc(33% - 20px);
}
@media (width < 1200px) {
.overview .card {
flex: 1 1 calc(50% - 20px);
}
}
.card-body, .card-title {
background-color: white;
}
.card-title h5 {
margin: 0;
}<body>
<div class="overview">
<div class="card">
<div class="card-title">
<h5>Panel 1</h5>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet quam eu urna laoreet suscipit. Sed nisi risus, lacinia nec arcu vitae, tempor imperdiet felis. Ut
sollicitudin quam sed ipsum euismod pulvinar sed sit amet nisi. Curabitur ut pretium sapien, a sollicitudin tortor. Vivamus eget pulvinar felis, a vulputate tortor. Integer vel
vestibulum dolor. Nam tempor consectetur nunc, tincidunt fermentum nulla pellentesque ac. Aliquam erat volutpat. In aliquet, mi nec pellentesque ultrices, justo tortor lobortis
neque, quis euismod felis nisi tristique metus. Morbi dictum, lacus a porttitor semper, est tortor ullamcorper ex, sed sagittis lacus enim vel mauris. Nunc laoreet venenatis
fermentum. Morbi congue dictum justo, in sollicitudin ex vulputate at. Integer interdum scelerisque turpis, eget tempus leo tristique eu.
</div>
</div>
<div class="card">
<div class="card-title">
<h5>Panel 2</h5>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet quam eu urna laoreet suscipit. Sed nisi risus, lacinia nec arcu vitae, tempor imperdiet felis. Ut
sollicitudin quam sed ipsum euismod pulvinar sed sit amet nisi. Curabitur ut pretium sapien, a sollicitudin tortor. Vivamus eget pulvinar felis, a vulputate tortor. Integer vel
vestibulum dolor. Nam tempor consectetur nunc, tincidunt fermentum nulla pellentesque ac. Aliquam erat volutpat. In aliquet, mi nec pellentesque ultrices, justo tortor lobortis
neque, quis euismod felis nisi tristique metus. Morbi dictum, lacus a porttitor semper, est tortor ullamcorper ex, sed sagittis lacus enim vel mauris. Nunc laoreet venenatis
fermentum. Morbi congue dictum justo, in sollicitudin ex vulputate at. Integer interdum scelerisque turpis, eget tempus leo tristique eu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet quam eu urna laoreet suscipit. Sed nisi risus, lacinia nec arcu vitae, tempor imperdiet felis. Ut
sollicitudin quam sed ipsum euismod pulvinar sed sit amet nisi. Curabitur ut pretium sapien, a sollicitudin tortor. Vivamus eget pulvinar felis, a vulputate tortor. Integer vel
vestibulum dolor. Nam tempor consectetur nunc, tincidunt fermentum nulla pellentesque ac. Aliquam erat volutpat. In aliquet, mi nec pellentesque ultrices, justo tortor lobortis
neque, quis euismod felis nisi tristique metus. Morbi dictum, lacus a porttitor semper, est tortor ullamcorper ex, sed sagittis lacus enim vel mauris. Nunc laoreet venenatis
fermentum. Morbi congue dictum justo, in sollicitudin ex vulputate at. Integer interdum scelerisque turpis, eget tempus leo tristique eu.
</div>
</div>
<div class="card">
<div class="card-title">
<h5>Panel 3</h5>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet quam eu urna laoreet suscipit. Sed nisi risus, lacinia nec arcu vitae, tempor imperdiet felis. Ut
sollicitudin quam sed ipsum euismod pulvinar sed sit amet nisi. Curabitur ut pretium sapien, a sollicitudin tortor. Vivamus eget pulvinar felis, a vulputate tortor. Integer vel
vestibulum dolor. Nam tempor consectetur nunc, tincidunt fermentum nulla pellentesque ac. Aliquam erat volutpat. In aliquet, mi nec pellentesque ultrices, justo tortor lobortis
neque, quis euismod felis nisi tristique metus. Morbi dictum, lacus a porttitor semper, est tortor ullamcorper ex, sed sagittis lacus enim vel mauris. Nunc laoreet venenatis
fermentum. Morbi congue dictum justo, in sollicitudin ex vulputate at. Integer interdum scelerisque turpis, eget tempus leo tristique eu.
</div>
</div>
<div class="card">
<div class="card-title">
<h5>Panel 4</h5>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet quam eu urna laoreet suscipit. Sed nisi risus, lacinia nec arcu vitae, tempor imperdiet felis. Ut
sollicitudin quam sed ipsum euismod pulvinar sed sit amet nisi. Curabitur ut pretium sapien, a sollicitudin tortor. Vivamus eget pulvinar felis, a vulputate tortor. Integer vel
vestibulum dolor. Nam tempor consectetur nunc, tincidunt fermentum nulla pellentesque ac. Aliquam erat volutpat. In aliquet, mi nec pellentesque ultrices, justo tortor lobortis
neque, quis euismod felis nisi tristique metus. Morbi dictum, lacus a porttitor semper, est tortor ullamcorper ex, sed sagittis lacus enim vel mauris. Nunc laoreet venenatis
fermentum. Morbi congue dictum justo, in sollicitudin ex vulputate at. Integer interdum scelerisque turpis, eget tempus leo tristique eu.
</div>
</div>
<div class="card">
<div class="card-title">
<h5>Panel 5</h5>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet quam eu urna laoreet suscipit. Sed nisi risus, lacinia nec arcu vitae, tempor imperdiet felis. Ut
sollicitudin quam sed ipsum euismod pulvinar sed sit amet nisi. Curabitur ut pretium sapien, a sollicitudin tortor. Vivamus eget pulvinar felis, a vulputate tortor. Integer vel
vestibulum dolor. Nam tempor consectetur nunc, tincidunt fermentum nulla pellentesque ac. Aliquam erat volutpat. In aliquet, mi nec pellentesque ultrices, justo tortor lobortis
neque, quis euismod felis nisi tristique metus. Morbi dictum, lacus a porttitor semper, est tortor ullamcorper ex, sed sagittis lacus enim vel mauris. Nunc laoreet venenatis
fermentum. Morbi congue dictum justo, in sollicitudin ex vulputate at. Integer interdum scelerisque turpis, eget tempus leo tristique eu.
</div>
</div>
<div class="card">
<div class="card-title">
<h5>Panel 6</h5>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet quam eu urna laoreet suscipit. Sed nisi risus, lacinia nec arcu vitae, tempor imperdiet felis. Ut
sollicitudin quam sed ipsum euismod pulvinar sed sit amet nisi. Curabitur ut pretium sapien, a sollicitudin tortor. Vivamus eget pulvinar felis, a vulputate tortor. Integer vel
vestibulum dolor. Nam tempor consectetur nunc, tincidunt fermentum nulla pellentesque ac. Aliquam erat volutpat. In aliquet, mi nec pellentesque ultrices, justo tortor lobortis
neque, quis euismod felis nisi tristique metus. Morbi dictum, lacus a porttitor semper, est tortor ullamcorper ex, sed sagittis lacus enim vel mauris. Nunc laoreet venenatis
fermentum. Morbi congue dictum justo, in sollicitudin ex vulputate at. Integer interdum scelerisque turpis, eget tempus leo tristique eu.
</div>
</div>
</div>
</body>