How can I enable flex-wrap behavior on a dynamically generated row of bootstrap cards?

Question

//this function generates dynamic tiles using DOM selectors for single elements
function generateTiles(word) {
 //then gets the container element for tiles by its ID
tileContainer = document.getElementById("tile-container");

 //it them clears the container's content and applies styling
 tileContainer.innerHTML = "";
 tileContainer.classList.add("d-flex", "justify-content-evenly",);

 //then stores the correct word and generates a scrambled version
 correctWord = word;
 const scrambledWord = scrambleWord(word);

 //next it loops through each character in the word
 for (let i = 0; i < word.length; i++) {
    //creates a column element for each character
    const col = document.createElement("div",);
    col.classList.add("col-1");

    //creates a tile element from the bootstrap "card" component for the character
    const tile = document.createElement("div");
    tile.classList.add("card", "text-center", "border", "border-white", "border-3", "display-1", "shadow");

    //it sets background and text color styles for the tile
    tile.style.backgroundColor = "#b9e5ff";
    tile.style.color = "#00659F";
    tile.style.height = "150px";
    tile.style.width = "150px";
   

    //then creates a card body element and sets its content to a character from the scrambled word
    const cardBody = document.createElement("div");
    cardBody.classList.add("card-body", "mt-3");
    cardBody.textContent = scrambledWord[i];
    

    //and finally appends or 'nests' the card body into the tile, and the tile into the column, and the column into the tile container
    tile.appendChild(cardBody);
    col.appendChild(tile);
    tileContainer.appendChild(col);
 }
}

 <!-- Tiles Container -->
 <div class="" id="tile-container"></div>

Above are two code snippets from a simple word scramble game using vanilla JavaScript and Bootstrap v5.3. Game play: a word gets randomly selected from an array then scrambled and each letter is assigned to a dynamically generated bootstrap card. My problem is the cards horizontally overlap on small screens, so I want to enable flex-wrap on them. So far, adding flex-wrap to the tileContainer in my JavaScript in various ways has not resulted in my desired expectation of flex-wrapping cards.

Can someone please help me fix this issue? (btw, the extraneous-looking comments in my JS code are for me as I'm absolutely new to coding)

Here's a link to my word scramble website.