Container-Fluid in Mobile - html

Question

I have a list like that:
I open a hidden div to show details about list items like that:
It's ok for large screen but in mobile info div goes so below. Is it possible to open info div as %100 (Container-Fluid) under that item in mobile like that:
If it's possible what is the keywords or can you show an example? Thanks in advance.

Answer 1

I have created a sample where you need to create two locations with the same div contents, one for mobile (.mobile-content) and one for desktop (.desktop-content).
The way you style it is when the mobile is visible, the desktop is hidden and vice versa. You can hide and show element using the Bootstraps 4 .d-x-none and .d-x-block.
The only thing left is you have to implement the click mechanism when you click on the circles......
Example (view this in full page):
.main-box {
text-align:center;
}
.circle{
flex-basis:33%;
}
.circle img{
background:pink;
border-radius: 50%;
max-width:100%;
}
.mobile-content{
flex-basis:100%;
}
.desktop-content{
text-align:center;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div class="main-box container-fluid d-flex justify-content-center flex-wrap flex-lg-nowrap">
<div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
<div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
<div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
<div class="mobile-content p-2 d-lg-none">
<p>description comes here</p>
</div>
<div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
<div class="circle px-2"><img src="https://dummyimage.com/200x200/4d204d/ffffff" /></div>
</div>
<div class="desktop-content p-4 d-none d-lg-block">
<p>description comes here</p>
</div>

Answer 2

In bootstrap 4, for equal columns in all devices try like this
<div class="row">
<div class="col">
1 of n
</div>
<div class="col">
1 of n
</div>
<div class="col">
1 of n
</div>
.....
<div class="col">
n of n
</div>
</div>
#circle {
width: 50px;
height: 50px;
background: red;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col" id="circle">
</div>
<div class="col" id="circle">
</div>
<div class="col" id="circle">
</div>
<div class="col" id="circle">
</div>
<div class="col" id="circle">
</div>
</div>