Using Bootstrap 4, I’ve tried many different approaches including wrapping <i> in <div class="column"> and individually <div class="col-xs-6"> but they still appear as a row. I’m doing the same on another area of my HTML and and have four images appearing correctly, stacked two high, two rows.
I can still only get rows of icons, even with your code. I occasionally get them to stack, but with a missing </div> oddly enough. I am trying to get the icons in a vertical column, for test purposes, I will replace with <input> after I get it right. I just can’t see what the problem is, unless it’s with my width value somewhere.
Sorry, I’ve got many tabs open and I’m trying things out on the code at the same time.
I reset the CodePen code to what it is above. It creates two groups of three buttons in a row on CodePen. In the FreeCodeCamp exercise here it is the same code except two columns of three buttons.
Edited to say I want to achieve the FCC example in my CodePen code.
If you want the buttons to stack regardless of the device width, you will need to change the default value of the display property of the button element from inline-block to block.
First I understood that on desktops you want then inline and on mobile you want them stacked. My example was for that. I have changed it to be stacked on mobile and desktops as well using bs4 and no bs4.