Is there a way to make this using bootstrap 4? - css

Question

I currently have something like this https://jsfiddle.net/qjs5vzL2/32/. I would like it if the display is smaller than md the card to be displayed right bellow the button it corresponds to and not at the bottom of the page. Is there a way to make this using bootstrap 4.
My code looks like
<div class="row">
<div class="col-md-3"><a>Foo</a></div>
<div class="col-md-3"><a>Bar</a></div>
<div class="col-md-3"><a>Foobar</a></div>
<div class="col-md-3"><a>Barfoo</a></div>
</div>
<div>
My Content
</div>
Something like this:
desired layout for screens smaller than md

Answer 1

Yes, You can use CSS order property for that but all boxes should have the same first parent. For that you can bring your card inside the links row and give it the order 2 in the small screens.
You can update your HTML with the following code
<div class="container my-4">
<div class="row">
<div class="col-md-3 nav-button text-center selected">Events</div>
<div class="col-md-3 nav-button text-center">Foo</div>
<div class="col-md-3 nav-button text-center">Bar</div>
<div class="col-md-3 nav-button text-center">Profile</div>
<div class="col-12 mt-3">
<div class="card">
<div class="card-header">
<h1>
My Events
</h1>
</div>
<div class="card-body">
...
</div>
</div>
</div>
</div>
</div>
And update Your CSS with follwing Code
.nav-button {
border: 1px solid black;
}
.nav-button.selected {
background-color: red;
color: black !important;
}
a {
color: inherit;
}
#media (max-width: 992px){
.container .row > div:first-of-type{
order: 1;
}
.container .row > div:nth-of-type(2){
order: 3;
}
.container .row > div:nth-of-type(3){
order: 4;
}
.container .row > div:nth-of-type(4){
order: 5;
}
.container .row > div:nth-of-type(5){
order: 2;
}
}