Currently facing a challenge with responsive flex boxes. On desktop, I have 5 items in one row, but I need them to be displayed as 2 columns on tablets, with each column containing respective items. Additionally, 3 out of the 5 items should function as accordions (achieved through JS).
HTML:
<div class="footer-item">
<h3 class="mj-footer-header accordion">MENU 1</h3>
<div class="panel">
<div>Menu item</div>
<div>Menu item</div>
<div>Menu item</div>
<div>Menu item</div>
<div>Menu item</div>
<div>Menu item</div>
<div>Menu item</div>
</div>
</div>
<div class="footer-item">
<h3 class="maccordion">MENU 2</h3>
<div class="panel">
<div>Menu item</div>
<div>Menu item</div>
<div>Menu item</div>
<div>Menu item</div>
<div>Menu item</div>
<div>Menu item</div>
<div>Menu item</div>
</div>
</div>
<div class="footer-item">
<h3 class="accordion">MENU 3</h3>
<div class="panel">
<div>Menu item</div>
<div>Menu item</div>
<div>Menu item</div>
<div>Menu item</div>
<div>Menu item</div>
<div>Menu item</div>
<div>Menu item</div>
</div>
</div>
<div class="footer-item">
<h3>SUBSCRIBE</h3>
<form>
<input type="email" name="email" placeholder="Enter your email">
</form>
<a href="#">Subscribe</a>
</div>
<div class="footer-item">
<h3>CONTACTS</h3>
<div>Contact item</div>
<div>Contact item</div>
<div>Contact item</div>
<div>Contact item</div>
</div>
</div>
</div>
My desktop CSS:
.box {
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
My tablet CSS:
@media (min-width: 768px) and (max-width: 991px) {
.box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box>* {
flex: 1 1 50%;
}
}
Struggling to achieve the desired layout on tablets: MENU 1, MENU 2, MENU 3 in one column (50% width) and SUBSCRIBE, CONTACTS in another column (50% width). Seeking help to create two equal columns for this layout.