Looking to achieve a layout similar to this within a bootstrap modal:
https://i.sstatic.net/mNA6r.png
For larger devices, I want 3 columns with a size of 4, for medium devices 2 columns with a size of 6, and for smaller devices just 1 column. The pink area represents a small image.
I'm unsure of the best approach to implement this. Should I create multiple <ul> elements, such as using 3 separate uls each with 1/3 of the options and add .col classes to each <ul>, or is it better to use just one <ul> with .col classes on each list item?
Additionally, I would like to maintain equal spacing between list items both horizontally and vertically.
I currently have a structure set up here: https://jsfiddle.net/dehnxj77/. However, I am having trouble addressing the following issues:
The list items are not displaying with consistent horizontal and vertical spacing
The structure does not adjust responsively based on screen size like the desired image
I am using
flex-basis:30%on the list item to ensure equal width, but I'm uncertain if this is necessary with responsive classes