Looking for a better solution
I currently have 5 sets of items.
- Button
- Text
- Dropdown
- Pagination
- Icon
For larger screen sizes, specifically @media (min-width: 990px) {}
I would like all items to be in a single row, like so:
[button][Text][Dropdown][Pagination][Icon]
For medium screen sizes, i.e. @media (max-width: 990px) {}
I prefer all items to be in 3 rows, as shown below:
[button]
[Text][Dropdown]
[Pagination][Icon]
For smaller screen sizes, i.e. @media (max-width: 575px) {}
I want all items to be in 4 rows, laid out as follows:
[button]
[Text]
[Dropdown]
[Pagination][Icon]
I have attempted this in the provided code sandbox. Can someone offer a more effective solution?
Thank you.
@media only screen and (min-width: 990px) {
.items {
display: flex;
flex-direction: row;
margin-top:30px;
}
.item23 {
display: flex;
flex-direction: row;
}
}
@media only screen and (max-width: 990px) {
.items {
display: flex;
flex-direction: column;
margin-top:30px;
}
.item23 {
display: flex;
flex-direction: row;
margin-top:30px;
}
}
@media only screen and (max-width: 575px) {
.items {
display: flex;
flex-direction: column;
margin-top:30px;
}
.item23 {
display: flex;
flex-direction: column;
margin-top:30px;
}
}<div class="container">
<div class="items">
<div class="item1">
<button> button 1 </button>
<button> button 2 </button>
<button> button 3 </button>
<button> button 4 </button>
<button> button 5 </button>
</div>
<div class="item23">
<div class="item2">
<span> I am a Text! </span>
</div>
<div class="item3">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose letter <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><span>A</span></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
<div class="item4">
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
<div class="item5">
<i class="bi bi-gear"></i>
<div>
</div>
</div>